/*
Theme Name:   Litteraturloopen (Blocksy Child)
Theme URI:    https://www.litteraturloopen.se
Description:  Child theme of Blocksy for Litteraturloopen. All local customization
              belongs here — edits made directly to the Blocksy parent theme are
              destroyed the next time Blocksy updates.
Author:       Litteraturloopen
Template:     blocksy
Version:      1.0.0
Text Domain:  blocksy-child
*/

/* ==========================================================================
   Design tokens
   From docs/litteraturloopen-designbrief.md and the prototype. Blue is the base
   colour; teal is reserved for Varberg / local pickup / återköp only. Prefixed
   `--ll-` so they never collide with Blocksy's own custom properties.
   ========================================================================== */

:root {
	/* Base blue is the new logo's own ink, #1F3A5F, with #16283F as the darker
	   shade — they replace #0C447C / #042C53 everywhere blue is the primary or
	   active colour. Every component in this file reads these two tokens, so the
	   swap reaches headings, the nav active state, buttons and badges at once.

	   The lighter steps (50/100/400/600) are deliberately left alone: the brief
	   replaces the two dark values only, and the tints are used as card washes
	   where they still read correctly under the new ink. */
	--ll-blue-50: #E6F1FB;
	--ll-blue-100: #B5D4F4;
	--ll-blue-400: #378ADD;
	--ll-blue-600: #185FA5;
	--ll-blue-800: #1F3A5F;
	--ll-blue-900: #16283F;

	--ll-teal-50: #E1F5EE;
	--ll-teal-400: #1D9E75;
	--ll-teal-600: #0F6E56;
	--ll-teal-800: #085041;
	--ll-teal-900: #04342C;

	--ll-amber-50: #FAEEDA;
	--ll-amber-800: #633806;

	--ll-ink: #1a1a1a;
	--ll-muted: #666;
	--ll-h2-color: #444;
	--ll-h3-color: #555;
	--ll-border: #e2e2e2;
	--ll-surface: #fff;

	--ll-radius: 12px;
	--ll-radius-sm: 8px;
	--ll-gap: 16px;

	/* Inter is loaded from Google Fonts in functions.php. The fallbacks are the
	   system UI stack, so the page still renders in something close before the
	   webfont arrives (it is loaded with display=swap). */
	--ll-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Site typeface — Inter, replacing Blocksy's Lato (body) and Poppins (h1)
   Blocksy exposes its typography as the custom property --theme-font-family and
   sets it in inline CSS: Lato on :root, Poppins on h1. Those settings live in
   theme_mods, i.e. the database, which this project can only pull — so they are
   overridden here instead of changed in the Customizer.

   The doubled :root:root is deliberate and is not a typo: it raises specificity
   above Blocksy's own :root rule without resorting to !important, so the
   override does not depend on which of the two stylesheets happens to load
   last. Same reason for the leading `body` on the headings.
   ========================================================================== */

:root:root {
	--theme-font-family: var(--ll-font-sans);
	--theme-font-size: 15px;
	--theme-line-height: 1.65;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .entry-title,
body .page-title {
	--theme-font-family: var(--ll-font-sans);
}

/* `pre`, `code` and .wp-block-pullquote keep the families Blocksy gives them —
   monospace and Georgia are deliberate choices for code and pullquotes, not the
   theme default this replaces. */

/* --------------------------------------------------------------------------
   The scale itself, from the prototype's "Designsystem" tab. The brief is
   explicit that the font-family swap alone still looks generic — the editorial
   feel comes from these sizes and weights, so both the custom property (which
   Blocksy derives other things from) and the concrete value are set.

   Blocksy's defaults being replaced: h1 45px/700 Poppins, page title 43px, and
   everything else inheriting 16px/400 Lato.
   -------------------------------------------------------------------------- */

body h1,
body .entry-header .page-title,
body[data-prefix] .entry-header .page-title {
	--theme-font-size: 26px;
	--theme-font-weight: 600;
	--theme-line-height: 1.3;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

body h2 {
	--theme-font-size: 19px;
	--theme-font-weight: 600;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--ll-h2-color);
}

body h3 {
	--theme-font-size: 15px;
	--theme-font-weight: 500;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0;
	color: var(--ll-h3-color);
}

/* h4–h6 are not in the brief's scale. They sit between h3 and body so the
   document does not jump back up a size below h3. */
body h4,
body h5,
body h6 {
	--theme-font-size: 15px;
	--theme-font-weight: 600;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ll-h3-color);
}

/* Secondary / meta text: stock status, condition labels, card sub-lines. */
.ll-muted,
.ll-info__body,
.ll-step__label,
.ll-cta p,
.ll-facts__item {
	font-size: 13px;
	color: var(--ll-muted);
}

/* ==========================================================================
   Header — three columns: logo left, nav centred, search right
   Markup is Blocksy's and is untouched; this is layout only.

   Blocksy renders the middle row as two columns — [start] holding the logo AND
   the nav, [end] holding the search — so the nav sits immediately after the
   logo and reads as left-aligned. `display: contents` dissolves the two wrapper
   divs in the start column, promoting the logo and the nav to direct children of
   the grid. With side tracks of 1fr each, the centre track lands on the true
   horizontal centre of the header regardless of how wide the logo or the search
   control happen to be.

   Scoped to [data-device="desktop"], so the mobile header (logo + hamburger, a
   different DOM branch) is untouched.

   ⚠️ The breakpoint is 1200px, not Blocksy's 1000px desktop breakpoint, and that
   is measured rather than picked. Below ~1200px the side tracks bind against the
   logo's own width, so the nav cannot sit on the true centre anyway — it landed
   55px off at 1100 and 76px off at 1024, no better than the stock header. Worse,
   at 1024 the narrower centre track made Blocksy's menu-overflow script collapse
   "Kontakta oss" into a "Mer" dropdown at first paint, because it measures with
   the fallback font and only recomputes after Inter swaps in — a visible flicker
   on every load, in exchange for no centring. So the three-column layout applies
   only where it actually delivers: offset is 0px at 1280 and above, 10px at 1200.

   ⚠️ Every selector here leads with #header on purpose. Blocksy's own rules are
   `#header [data-column-set="2"]>div{grid-template-columns:auto auto}` and
   `#header [data-items]{display:flex}` — an ID beats any number of classes, so a
   class-only override silently loses no matter how long it is. Matching the ID
   is what makes these win without !important.

   (Blocksy has a native three-column header — `[data-column-set="3"]` already
   resolves to `1fr auto 1fr` — but switching to it is a Customizer setting, and
   Customizer settings live in theme_mods, i.e. the database, which this project
   can only pull. Hence CSS. If the header is ever rebuilt with a middle column
   in wp-admin, this whole block can be deleted.)
   ========================================================================== */

@media (min-width: 1200px) {
	#header [data-device="desktop"] [data-column-set="2"] > .ct-container {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: 24px;
	}

	#header [data-device="desktop"] [data-column-set="2"] > .ct-container > [data-column="start"],
	#header [data-device="desktop"] [data-column-set="2"] > .ct-container > [data-column="start"] > [data-items] {
		display: contents;
	}

	#header [data-device="desktop"] [data-column-set="2"] .site-branding {
		justify-self: start;
	}

	#header [data-device="desktop"] [data-column-set="2"] > .ct-container > [data-column="end"] {
		justify-self: end;
	}
}

/* --------------------------------------------------------------------------
   Logo. The header renders the full lockup (icon + wordmark) via the attribute
   filter in inc/brand.php. The mobile header gets the icon-only file instead,
   swapped here rather than in PHP because Blocksy renders both header branches
   from the same template and the same attachment — there is no per-device hook
   to filter.

   aspect-ratio is set explicitly: the <img> still carries the lockup's 240x290
   width/height attributes, and without this the square icon would be stretched
   to that ratio.
   -------------------------------------------------------------------------- */

@media (max-width: 999.98px) {
	#header [data-device="mobile"] .site-logo-container img {
		content: url("assets/litteraturloopen-logo-icon.svg");
		width: auto;
		aspect-ratio: 1 / 1;
	}
}

/* One row, always — across the whole desktop range, not just where the nav is
   centred. Four Swedish nav labels are long enough that a wrap would drop
   "Kontakta oss" onto a second line as the viewport narrows, changing the
   header's height as well as its look. (Blocksy's own overflow handling moves
   surplus items into a "Mer" dropdown instead, which is a single row too.) */
@media (min-width: 1000px) {
	#header [data-device="desktop"] [data-id="menu"] > ul {
		flex-wrap: nowrap;
	}

	#header [data-device="desktop"] [data-id="menu"] > ul > li > .ct-menu-link {
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   Navigation active state — blue, not teal.
   Blocksy's palette colour 2 is #30d5c8, a turquoise it uses for every link
   hover and for the current menu item. Teal is reserved for Varberg content
   (badges, Student i Varberg, the buyback flow) and must never read as a
   general UI state, so the header nav is pinned to Blue 800.

   The hover colour is set here too, not just the active one. Without it the
   current item reverts to turquoise the moment the pointer touches it, which
   would leave the fix visible only until someone moves the mouse.
   -------------------------------------------------------------------------- */

.ct-header [data-id="menu"] > ul > li.current-menu-item > .ct-menu-link,
.ct-header [data-id="menu"] > ul > li.current_page_item > .ct-menu-link,
.ct-header [data-id="menu"] > ul > li.current-menu-ancestor > .ct-menu-link,
.ct-header [data-id="menu"] > ul > li.current-menu-parent > .ct-menu-link {
	--theme-link-initial-color: var(--ll-blue-800);
	--theme-link-hover-color: var(--ll-blue-800);
	color: var(--ll-blue-800);

	/* A real underline rather than a border, so it hugs the text instead of
	   sitting at the bottom of the full-height header link, and so turning it on
	   and off shifts nothing. */
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: currentColor;
	text-underline-offset: 6px;
	text-decoration-skip-ink: none;
}

.ct-header [data-id="menu"] > ul > li > .ct-menu-link:hover,
.ct-header [data-id="menu"] > ul > li > .ct-menu-link:focus-visible {
	--theme-link-hover-color: var(--ll-blue-800);
	color: var(--ll-blue-800);
}

/* ==========================================================================
   Headings — long Swedish compounds
   Swedish stacks compounds into single very long words: "återköpserbjudande",
   "yrkesvägledarutbildning", "miljökonsekvensbeskrivning". At heading sizes on
   a phone these are wider than the viewport, and the browser's fallback is to
   cut them mid-word with no hyphen ("återköpserbju / dande").

   hyphens:auto lets the browser break at real syllable boundaries and insert a
   hyphen instead. It needs a language to choose a dictionary — WordPress
   already emits <html lang="sv-SE"> via language_attributes(), so no markup
   change is needed; do not remove that. overflow-wrap stays underneath as a
   last resort for strings with no valid hyphenation point, such as URLs or a
   bare ISBN, where an arbitrary break still beats overflowing the page.
   ========================================================================== */

/* Scoped to the content area rather than an enumerated list of classes, so it
   also covers headings rendered by templates we do not control — WooCommerce's
   coming-soon placeholder is a bare .wp-block-heading and was missed by an
   earlier class list. Header, nav and footer are outside #main and unaffected. */
#main h1,
#main h2,
#main h3,
#main h4,
.page-title,
.entry-title {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* The 34px/26px step-downs that used to live here are gone: they existed only
   to tame Blocksy's 43px page title, and the design system now sets every h1 to
   26px at all widths, which was the old mobile size anyway. Hyphenation above is
   what still does the work on long compounds.

   Product titles keep a mobile step-down — they are the longest strings on the
   site ("miljökonsekvensbeskrivning" is a real one) and 26px still overflows a
   360px viewport even hyphenated. */
@media (max-width: 689.98px) {
	body .entry-summary .entry-title {
		--theme-font-size: 22px;
		font-size: 22px;
		line-height: 1.25;
	}
}

/* ==========================================================================
   Cards and grid — shared building blocks for the refreshed pages.
   Flat surfaces: no shadows, no gradients.
   ========================================================================== */

.ll-grid {
	display: grid;
	gap: var(--ll-gap);
}

.ll-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ll-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ll-card {
	background: var(--ll-surface);
	border: 1px solid var(--ll-border);
	border-radius: var(--ll-radius);
	padding: 20px;
	box-shadow: none;
}

.ll-card > *:first-child {
	margin-top: 0;
}

.ll-card > *:last-child {
	margin-bottom: 0;
}

.ll-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: var(--ll-blue-50);
	color: var(--ll-blue-800);
}

/* --------------------------------------------------------------------------
   Two-path cards — the tonal pair used for the buying paths (homepage, Om oss).
   Per the brief: blue is the base and carries national shipping; teal is
   reserved for Varberg / local pickup / återköp and is never a general accent.
   -------------------------------------------------------------------------- */

.ll-card--path {
	border: none;
}

.ll-card--path .ll-card__icon {
	background: #fff;
}

.ll-card--path > *:last-child {
	margin-bottom: 0;
}

.ll-card--path h1,
.ll-card--path h2,
.ll-card--path h3,
.ll-card--path h4 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: -0.01em;
}

.ll-card--path p,
.ll-card--path li {
	font-size: 14px;
	line-height: 1.6;
}

.ll-card--path ul {
	margin: 0 0 10px;
	padding-left: 18px;
}

.ll-card--path li {
	margin-bottom: 6px;
}

.ll-card--path a {
	font-weight: 600;
	text-decoration: none;
}

.ll-card--path a:hover,
.ll-card--path a:focus {
	text-decoration: underline;
}

.ll-card--teal {
	background: var(--ll-teal-50);
}

.ll-card--teal h1,
.ll-card--teal h2,
.ll-card--teal h3,
.ll-card--teal h4 {
	color: var(--ll-teal-900);
}

.ll-card--teal .ll-card__icon {
	color: var(--ll-teal-800);
}

.ll-card--teal p,
.ll-card--teal li,
.ll-card--teal strong {
	color: var(--ll-teal-800);
}

.ll-card--teal a {
	color: var(--ll-teal-900);
}

.ll-card--blue {
	background: var(--ll-blue-50);
}

.ll-card--blue h1,
.ll-card--blue h2,
.ll-card--blue h3,
.ll-card--blue h4 {
	color: var(--ll-blue-900);
}

.ll-card--blue .ll-card__icon {
	color: var(--ll-blue-800);
}

.ll-card--blue p,
.ll-card--blue li,
.ll-card--blue strong {
	color: var(--ll-blue-800);
}

.ll-card--blue a {
	color: var(--ll-blue-900);
}

/* --------------------------------------------------------------------------
   Note boxes — a line of copy in a tinted panel with an icon beside it.
   Teal carries Varberg / buyback information; amber is the warning callout.
   -------------------------------------------------------------------------- */

.ll-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border-radius: var(--ll-radius);
}

.ll-note .ll-card__icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	background: none;
	border-radius: 0;
}

.ll-note__body > *:first-child {
	margin-top: 0;
}

.ll-note__body > *:last-child {
	margin-bottom: 0;
}

.ll-note__body p {
	font-size: 14px;
	line-height: 1.6;
}

/* The callout is a blockquote in the page content; strip the quote chrome so it
   reads as a panel rather than a quotation. */
.ll-note__body blockquote {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font-style: normal;
	quotes: none;
}

.ll-note__body blockquote::before,
.ll-note__body blockquote::after {
	content: none;
}

.ll-note__body em {
	font-style: normal;
}

.ll-note--teal {
	background: var(--ll-teal-50);
	color: var(--ll-teal-900);
}

.ll-note--teal .ll-card__icon,
.ll-note--teal p,
.ll-note--teal strong {
	color: var(--ll-teal-800);
}

/* The site's designated treatment for important caveats: the buyback page's
   "Observera" note and the Student i Varberg edition-check reminder. Metrics are
   the prototype's `.note-warning` — 10px radius and 13px text, slightly tighter
   than the teal note, which is a card in the prototype rather than a callout. */
.ll-note--warning {
	gap: 8px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--ll-amber-50);
	color: var(--ll-amber-800);
}

.ll-note--warning .ll-card__icon,
.ll-note--warning p,
.ll-note--warning strong,
.ll-note--warning a {
	color: var(--ll-amber-800);
}

.ll-note--warning .ll-note__body p {
	font-size: 13px;
	line-height: 1.55;
}

.ll-note--warning .ll-card__icon svg {
	width: 18px;
	height: 18px;
}

/* Spacing between the reminder and the program cards below it. */
.ll-varberg__note {
	margin-bottom: 20px;
}

/* ==========================================================================
   Frivilligt återköpserbjudande
   Markup is assembled in inc/buyback-page.php; the copy still comes from the
   page itself.
   ========================================================================== */

/* The opening line is the page's promise, so it is set as a lead. It used to be
   capped at 560px, which broke it after "smidigt för" and left "dig som student
   i Varberg" hanging on a line of its own. */
.ll-buyback__intro p {
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.6;
}

.ll-buyback__intro,
.ll-buyback__lead {
	margin-bottom: 16px;
}

.ll-buyback__lead p {
	max-width: 76ch;
}

/* "Hur fungerar det?" — a bold paragraph in the page source, promoted to a real
   heading in inc/buyback-page.php. Matches .ll-scale__heading on Skickskalan
   exactly; the two pages divide themselves the same way because they are
   written the same way. */
.ll-buyback__heading {
	margin: 26px 0 12px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ll-ink);
	text-transform: none;
	letter-spacing: 0;
}

.ll-buyback .ll-note {
	margin-bottom: 20px;
}

.ll-buyback .ll-steps,
.ll-buyback .ll-infos {
	margin-bottom: 20px;
}

/* The three numbered steps. */
.ll-step .ll-card__icon {
	width: 28px;
	height: 28px;
	background: var(--ll-teal-50);
	color: var(--ll-teal-800);
}

.ll-step .ll-card__icon svg {
	width: 16px;
	height: 16px;
}

.ll-step__label {
	margin: 0 0 2px;
	color: var(--ll-muted);
	font-size: 13px;
}

.ll-step__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
}

.ll-step__body {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

/* The supplementary cards at the bottom. */
.ll-info__title {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
}

.ll-info__title .ll-card__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	background: none;
	border-radius: 0;
	color: var(--ll-teal-800);
}

.ll-info__title .ll-card__icon svg {
	width: 17px;
	height: 17px;
}

.ll-info__body {
	margin: 0;
	color: var(--ll-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* ==========================================================================
   Skickskalan
   Markup is assembled in inc/condition-page.php; the copy still comes from the
   page itself. The cards and note boxes above are shared on purpose — the
   buyback page links here for "how do you judge condition?", so the two should
   read as one pair of pages rather than two designs.
   ========================================================================== */

.ll-scale__lead {
	max-width: 76ch;
	margin: 0 0 14px;
}

.ll-scale__heading {
	margin: 28px 0 12px;
	font-size: 17px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

.ll-scale__levels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--ll-gap);
	margin: 20px 0;
	padding: 0;
	list-style: none;
}

/* ⚠️ THE LIST MARKER HAS TO GO EXPLICITLY. These are <li>s inside an <ol>, and
   the theme's own content styles put a number and an indent back on any list
   item they can reach — which would have printed "1." beside a card that
   already shows its rank as dots. */
.ll-scale__levels > li {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.ll-scale__levels > li::marker {
	content: none;
}

.ll-level__rank {
	display: flex;
	gap: 4px;
	margin-bottom: 10px;
}

.ll-level__rank i {
	width: 22px;
	height: 4px;
	border-radius: 999px;
	background: var(--ll-border);
}

.ll-level__rank i.is-on {
	background: var(--ll-teal-800);
}

.ll-level__name {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
}

.ll-level__body {
	margin: 0;
	color: var(--ll-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* What we will not sell, and will not buy back. Amber rather than red: this is
   a boundary the customer needs to see before they travel with a book, not an
   error they have made. */
.ll-reject {
	margin: 24px 0;
	/* Tinted from the text colour rather than a token of its own: an amber-50
	   border on an amber-50 panel is no border at all. */
	border-color: rgba(99, 56, 6, 0.16);
	background: var(--ll-amber-50);
}

.ll-reject__title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ll-amber-800);
}

.ll-reject__title .ll-card__icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	background: none;
	border-radius: 0;
	color: var(--ll-amber-800);
}

.ll-reject__title .ll-card__icon svg {
	width: 20px;
	height: 20px;
}

.ll-reject__intro {
	margin: 0 0 12px;
	max-width: 68ch;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ll-amber-800);
}

.ll-reject__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ll-reject__list li {
	position: relative;
	margin: 0;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ll-amber-800);
}

/* A dash, not a bullet — these are criteria in a warning box, and round bullets
   in an amber panel read as a checklist of things to do. */
.ll-reject__list li::before {
	position: absolute;
	top: 0;
	left: 4px;
	content: '–';
	opacity: 0.65;
}

/* ==========================================================================
   Student i Varberg
   Markup is assembled in inc/varberg-page.php; the copy — including the hero
   chips and both call-to-action boxes — still comes from the page itself.
   ========================================================================== */

.ll-varberg__hero {
	margin-bottom: 24px;
	padding: 22px;
	border-radius: var(--ll-radius);
	background: var(--ll-teal-50);
}

.ll-varberg__hero p {
	max-width: 620px;
	margin-bottom: 0;
	color: var(--ll-teal-800);
}

.ll-varberg__hero a {
	color: var(--ll-teal-900);
	font-weight: 600;
}

/* The intro links to the buyback page and the owner set that link in italics;
   it reads as body copy here, so it is rendered upright — the markup is left
   alone, as on Om oss. */
.ll-varberg__hero em {
	font-style: normal;
}

/* The value-proposition chips. A list in the page content so the owner can
   reword them; the icons and the row layout come from here. */
.ll-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.ll-facts__item {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--ll-teal-900);
	font-size: 14px;
	line-height: 1.4;
}

.ll-facts__icon {
	display: flex;
	flex: 0 0 auto;
	color: var(--ll-teal-600);
}

.ll-facts__icon svg {
	width: 18px;
	height: 18px;
}

/* `.ll-varberg__lead` is gone: the paragraph it styled — the reminder to check
   editions with the school contact — is now the amber warning callout above. */

/* --------------------------------------------------------------------------
   Program cards — the page's two program buttons, rendered as cards.
   -------------------------------------------------------------------------- */

.ll-programs {
	margin-bottom: 28px;
}

/* One card on its own — see the note in inc/varberg-page.php. auto-FILL instead
   of auto-fit: the empty tracks stay, so the card is one column wide like the
   programmes above it rather than a full-width band.

   It then sits in the LAST column (grid-column: -2 is the final track of an
   explicit-track grid). Left-aligned it looked like a seventh programme that had
   wrapped; at the far edge it reads as set apart on purpose, which is what it
   is. On a single-column phone layout -2 is the only column, so nothing moves. */
.ll-programs--single {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.ll-programs--single .ll-program {
	grid-column: -2;
}

.ll-program {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ll-program:hover,
.ll-program:focus-visible {
	border-color: var(--ll-blue-400);
	color: inherit;
	text-decoration: none;
}

.ll-program__arrow {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 6px;
	color: var(--ll-muted);
}

.ll-program:hover .ll-program__arrow,
.ll-program:focus-visible .ll-program__arrow {
	color: var(--ll-blue-800);
}

.ll-program__title {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   The two call-to-action boxes. Dashed borders mark them as invitations rather
   than as content, matching the prototype, and both carry the same weight —
   selling books to us is as much an ask as flagging a missing title.
   -------------------------------------------------------------------------- */

.ll-cta {
	display: flex;
	flex-direction: column;
	border-style: dashed;
}

.ll-cta__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: var(--ll-blue-50);
	color: var(--ll-blue-800);
}

.ll-cta h1,
.ll-cta h2,
.ll-cta h3,
.ll-cta h4 {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
}

.ll-cta p {
	margin: 0 0 12px;
	color: var(--ll-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* The link is the box's action. Pushed to the bottom so both buttons line up
   however unevenly the two texts wrap. */
.ll-cta p:last-child {
	margin-top: auto;
	margin-bottom: 0;
}

/* Styled into a button by CSS alone, so the anchor in the page content keeps
   exactly the markup the owner wrote — the same approach as the mailto link on
   Kontakta oss. */
.ll-cta p:last-child a {
	display: inline-block;
	padding: 7px 15px;
	border: 1px solid var(--ll-blue-800);
	border-radius: var(--ll-radius-sm);
	background: var(--ll-blue-800);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.ll-cta p:last-child a:hover,
.ll-cta p:last-child a:focus {
	background: var(--ll-blue-900);
	border-color: var(--ll-blue-900);
	color: #fff;
	text-decoration: none;
}

/* The second box takes the outline variant, as in the prototype, so the two
   asks are equally prominent without competing as two filled buttons. */
.ll-ctas > *:nth-child(n+2) .ll-cta__icon {
	background: var(--ll-teal-50);
	color: var(--ll-teal-800);
}

.ll-ctas > *:nth-child(n+2) p:last-child a {
	background: var(--ll-surface);
	color: var(--ll-blue-800);
}

.ll-ctas > *:nth-child(n+2) p:last-child a:hover,
.ll-ctas > *:nth-child(n+2) p:last-child a:focus {
	background: var(--ll-blue-50);
	border-color: var(--ll-blue-800);
	color: var(--ll-blue-900);
}

/* ==========================================================================
   Homepage — phase 1
   Markup is assembled in inc/home-page.php; the copy still comes from the page
   itself. Phase 2 (category row, curated title rows) is deliberately absent.
   ========================================================================== */

/* The hero was a 371px solid dark-blue cover block. The brief asks for a light
   hero instead — the page's own headline, one supporting line, one button. */
.ll-hero {
	margin-bottom: 28px;
	padding: 40px 24px 44px;
	border-radius: var(--ll-radius);
	background: var(--ll-blue-50);
	text-align: center;
}

.ll-hero > *:last-child {
	margin-bottom: 0;
}

/* The headline is a bold paragraph in the page content, not a heading block, so
   it is sized here rather than by the h1 rule. Left as a paragraph on purpose:
   promoting it to a real <h1> would be a content change, not a styling one. */
.ll-hero p:first-child,
.ll-hero p:first-child strong {
	margin: 0 auto 12px;
	max-width: 20ch;
	color: var(--ll-blue-900);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.ll-hero p {
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
	color: var(--ll-blue-800);
}

/* The button carried preset classes for a white-on-dark treatment; those are
   stripped in PHP, so it can be styled as the standard primary button here. */
.ll-hero .wp-block-button__link {
	display: inline-block;
	padding: 9px 18px;
	border: none;
	border-radius: var(--ll-radius-sm);
	background: var(--ll-blue-800);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.ll-hero .wp-block-button__link:hover,
.ll-hero .wp-block-button__link:focus {
	background: var(--ll-blue-900);
	color: #fff;
}

.ll-home__lead {
	margin-bottom: 14px;
	text-align: center;
	font-weight: 600;
}

.ll-home__lead p {
	margin-bottom: 0;
}

.ll-paths {
	margin-bottom: 20px;
}

.ll-card__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.ll-card__link {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.ll-card__link::after {
	content: " \2192";
}

.ll-card__link:hover,
.ll-card__link:focus {
	text-decoration: underline;
}

/* "Vill du sälja din kurslitteratur?" was a second 292px dark cover block. The
   brief asks for a single slim row with an icon instead. */
.ll-sell-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 8px;
	padding: 14px 18px;
}

.ll-sell-row__icon {
	display: flex;
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--ll-teal-600);
}

.ll-sell-row__icon svg {
	width: 20px;
	height: 20px;
}

.ll-sell-row__body {
	min-width: 0;
}

.ll-sell-row__body > *:first-child {
	margin-top: 0;
}

.ll-sell-row__body > *:last-child {
	margin-bottom: 0;
}

.ll-sell-row__body p {
	margin-bottom: 4px;
	font-size: 14px;
	line-height: 1.55;
	text-align: left;
}

/* The first paragraph is the CTA's own headline — a row label, not a banner
   headline, so it sits at body weight rather than the 26px it was. */
.ll-sell-row__body p:first-child {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ll-ink);
}

.ll-sell-row__body p:last-child a {
	font-weight: 600;
	color: var(--ll-blue-800);
	text-decoration: none;
}

.ll-sell-row__body p:last-child a:hover,
.ll-sell-row__body p:last-child a:focus {
	text-decoration: underline;
}

/* ==========================================================================
   Om oss
   Markup is assembled in inc/about-page.php; the copy still comes from the
   page itself.
   ========================================================================== */

/* The closing "we're just starting out" invitation is a card of its own — same
   surface, border, radius and padding as the two path cards above it. */
.ll-about__closing {
	margin-top: 28px;
}

.ll-about__closing-icon {
	display: flex;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	border-radius: 50%;
	background: var(--ll-blue-50);
	color: var(--ll-blue-800);
}

.ll-about__closing :is(h1, h2, h3, h4) {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ll-ink);
	letter-spacing: -0.01em;
}

.ll-about__closing p {
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 1.6;
}

.ll-about__closing > *:last-child {
	margin-bottom: 0;
}

.ll-about__closing a {
	font-weight: 600;
	color: var(--ll-blue-800);
	text-decoration: underline;
}

.ll-about__intro {
	margin-bottom: 24px;
}

.ll-about__intro p:last-child {
	margin-bottom: 0;
}

/* The closing "Vi är nystartade" copy is wrapped in <em> in the page content,
   which set the whole block in italics. It reads as body copy, not emphasis, so
   it is rendered upright here — the markup is left alone. */
.ll-about__closing em {
	font-style: normal;
}

/* ==========================================================================
   Kontakta oss
   Markup is assembled in inc/contact-page.php; the copy still comes from the
   page itself.
   ========================================================================== */

.ll-contact__intro {
	margin-bottom: 20px;
}

.ll-contact__intro p {
	max-width: 480px;
	margin-bottom: 0;
}

.ll-contact .ll-card h1,
.ll-contact .ll-card h2,
.ll-contact .ll-card h3,
.ll-contact .ll-card h4 {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.ll-contact .ll-card p {
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 1.6;
}

/* The mailto link is styled into a button here rather than rewritten in PHP, so
   the link markup itself stays exactly as the page author wrote it. */
.ll-contact .ll-card a[href^="mailto:"] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 15px;
	border: 1px solid var(--ll-blue-800);
	border-radius: var(--ll-radius-sm);
	background: var(--ll-surface);
	color: var(--ll-blue-800);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.ll-contact .ll-card a[href^="mailto:"]:hover,
.ll-contact .ll-card a[href^="mailto:"]:focus {
	background: var(--ll-blue-50);
	color: var(--ll-blue-900);
	text-decoration: none;
}

.ll-contact .ll-card--form {
	margin-top: var(--ll-gap);
	max-width: 480px;
}

.ll-contact .ll-card--form h1,
.ll-contact .ll-card--form h2,
.ll-contact .ll-card--form h3,
.ll-contact .ll-card--form h4 {
	margin-bottom: 14px;
}

/* ==========================================================================
   Forms — Fluent Forms, appearance only
   Field names, markup, validation and submission are the plugin's and are left
   completely alone; nothing here changes what is posted or where.

   This was originally scoped to the Kontakta oss card alone. The brief now asks
   for the same treatment on the Intresseanmälan form "and any other form on the
   site", so the rules are keyed on `.ll-form` — a wrapper this theme puts around
   any Fluent Form inside #main — with the contact card opting in through the
   same class. One definition, both forms, and no other plugin's forms touched.
   ========================================================================== */

.ll-form {
	max-width: 480px;
}

.ll-form :is(h1, h2, h3, h4) {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--ll-ink);
}

/* ⚠️ Everything below carries the `form` element and `.ff-el-group` in the
   chain for the same reason the submit button does. The two forms on this site
   are configured differently in Fluent Forms — Intresseanmälan uses the
   plugin's own styling (`ffs_default`), Kontakta oss inherits the theme's
   (`ffs_inherit_theme`) — so the rule that has to be beaten is the plugin's on
   one page and Blocksy's on the other. This chain is (0,4,1) and clears both
   without !important. A shorter selector styled one form and silently left the
   other looking untouched. */
.ll-form .fluentform form .ff-el-group {
	margin-bottom: 12px;
}

.ll-form .fluentform form .ff-el-input--label label {
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ll-ink);
}

.ll-form .fluentform form .ff-el-group .ff-el-form-control {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--ll-border);
	border-radius: var(--ll-radius-sm);
	background: var(--ll-surface);
	color: var(--ll-ink);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
	box-shadow: none;
}

.ll-form .fluentform form .ff-el-group .ff-el-form-control:focus {
	border-color: var(--ll-blue-400);
	outline: 2px solid var(--ll-blue-50);
	outline-offset: 0;
}

.ll-form .fluentform form .ff-el-group textarea.ff-el-form-control {
	min-height: 96px;
	resize: vertical;
}

/* ⚠️ The extra `form` in these two selectors is load-bearing, not noise.
   Fluent Forms prints a per-form <style> block in the body:

       form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style) { … }

   which is (0,3,1). A selector of `.ll-form .fluentform .ff-btn-submit` is
   (0,3,0) and loses on specificity no matter where the stylesheet sits, which is
   exactly what happened: the button kept the plugin's own bright blue, its 3px
   radius and its 5px/20px padding. Adding the element selector takes this to
   (0,4,1) and wins without !important. Keep the `:not()` variant alongside it so
   both forms match whether or not the plugin adds that class. */
.ll-form .fluentform form .ff-btn-submit,
.ll-form .fluentform form .ff-btn-submit:not(.ff_btn_no_style) {
	padding: 9px 18px;
	border: none;
	border-radius: var(--ll-radius-sm);
	background: var(--ll-blue-800);
	background-color: var(--ll-blue-800);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	box-shadow: none;
}

.ll-form .fluentform form .ff-btn-submit:hover,
.ll-form .fluentform form .ff-btn-submit:focus,
.ll-form .fluentform form .ff-btn-submit:not(.ff_btn_no_style):hover,
.ll-form .fluentform form .ff-btn-submit:not(.ff_btn_no_style):focus {
	background: var(--ll-blue-900);
	background-color: var(--ll-blue-900);
	color: #fff;
}

/* Standalone form pages (Intresseanmälan) get the card and some breathing room
   above; inside Kontakta oss the card already exists.

   The card must line up with the page heading, and getting there took two
   wrong turns worth recording.

   `.entry-content` on these pages is full-bleed. What puts ordinary blocks
   flush with the heading is WordPress constraining each *direct child* to the
   content width and centring it:

       .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
           max-width: var(--wp--style--global--content-size);
           margin-left: auto !important; margin-right: auto !important;
       }

   A card capping itself at 480px is centred at *that* width instead, which left
   it stranded 405px right of the heading. Overriding the auto margin to 0 then
   flung it to the far page edge, 75px left of the heading — the constraint is
   what supplies the left offset, so removing it is not the fix either.
   (`!important` is also unavoidable there: `:where()` gives that rule near-zero
   specificity, so nothing can outrank it.)

   So `inc/form-layout.php` emits a plain `.ll-form-wrap` around the card. The
   wrapper is the direct child, takes the constraint, and lands in the content
   column; the card is nested one level down where the layout rule cannot reach
   it, and caps itself flush left. No `!important` anywhere. */
.ll-form-wrap > .ll-form--standalone {
	margin-top: 8px;
	margin-left: 0;
	margin-right: auto;
}

/* ---------------------------------------------------------------------------
   Köpvillkor & Ångerrätt and Integritetspolicy — laid out as legal documents.

   Both pages are a preamble followed by a run of same-level headings and
   nothing else, so the global heading scale leaves them with no hierarchy: h3
   is 15px/500 and h4 15px/600, both grey, which is correct on a page that also
   has an h1 and h2s but not on one where that level IS the structure. Add
   paragraphs run out to the full ~1300px content width and you get a wall.

   These are read in order and referred to by position, so: ONE column, top to
   bottom, hairline between sections — not the two-column card grid the
   marketing pages use, which was tried first and broke exactly the sequence the
   numbering promises. What keeps them on-brand is the surface: the same white
   card, 1px border and 12px radius as everything else.

   The measure is the point of the whole exercise. `.ll-legal__doc` caps at
   50rem so a line lands near 90 characters at 15px — wide enough that a long
   clause is not a column of confetti, short enough to read.

   The two pages use different heading levels (h2 + h3s vs h3 + h4s), which is
   why every rule below matches the section wrapper and any heading inside it
   rather than naming a level. `inc/legal-pages.php` works out which level
   carries the sections per page.
   --------------------------------------------------------------------------- */

/* .ll-legal is the direct child of .entry-content and takes WordPress's own
   width constraint. The document nests inside so it can cap itself without
   being re-centred at that narrower width — see the .ll-form-wrap note above,
   which is the same trap and cost two wrong turns to work out the first time. */
.ll-legal__preamble {
	margin-bottom: 18px;
}

/* Levelled to one size across both pages: the preamble heading is an h2 on
   Köpvillkor and an h3 on Integritetspolicy, and left to the global scale the
   two pages would open at different sizes for the same job. */
.ll-legal__preamble h2,
.ll-legal__preamble h3,
.ll-legal__preamble h4 {
	margin: 0 0 8px;
	color: var(--ll-h2-color);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.ll-legal__preamble p {
	max-width: 50rem;
	margin-bottom: 0;
	color: var(--ll-muted);
}

.ll-legal__doc {
	max-width: 50rem;
	margin-left: 0;
	margin-right: auto;
	padding: 4px 32px;
}

@media (max-width: 689.98px) {
	.ll-legal__doc {
		padding: 4px 18px;
	}
}

/* Each section is a band of the document, divided by a hairline rather than by
   a gap — a continuous page, not a stack of separate objects. */
.ll-legal__section {
	padding: 24px 0;
	border-top: 1px solid var(--ll-border);
}

.ll-legal__section:first-child {
	border-top: 0;
}

.ll-legal__section > *:last-child {
	margin-bottom: 0;
}

/* Section heading. Ink, 17px/600, overriding the muted global h3/h4: here the
   heading IS the section, not a sub-level below something else. Any number
   stays part of the text exactly as written. */
.ll-legal__section h2,
.ll-legal__section h3,
.ll-legal__section h4,
.ll-legal__section h5,
.ll-legal__section h6 {
	margin: 0 0 10px;
	color: var(--ll-ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.005em;
}

.ll-legal__section p,
.ll-legal__section li {
	font-size: 15px;
	line-height: 1.7;
}

.ll-legal__section p {
	margin: 0 0 12px;
}

/* Both list types: Integritetspolicy numbers its processing purposes with an
   ordered list, Köpvillkor uses bullets throughout. */
.ll-legal__section ul,
.ll-legal__section ol {
	margin: 0 0 12px;
	padding-left: 22px;
}

.ll-legal__section li {
	margin-bottom: 8px;
}

.ll-legal__section li:last-child {
	margin-bottom: 0;
}

/* Sub-parts inside a section. The copy already marks these with a leading bold
   run, so they are promoted to sub-headings off that — no rewriting.

   `:only-child` counts ELEMENT children, so this deliberately catches both
   shapes the copy uses:
     A — <p><strong>A. Villkor för återköp:</strong></p>       bold run alone
     B — <p><strong>B. Ändringar…</strong> Vårt återköps…</p>  bold run + text
   B runs straight into its sentence with no punctuation after the title, which
   reads as a heading the author did not mark up as one; giving both the same
   treatment keeps the two sub-parts parallel, which is how they are written. */
.ll-legal__section p > strong:only-child {
	display: block;
	margin-top: 6px;
	margin-bottom: 4px;
	color: var(--ll-ink);
	font-size: 15px;
	font-weight: 600;
}

/* A bold run opening a list item or paragraph is that item's own label. */
.ll-legal__section li > strong:first-child,
.ll-legal__section p > strong:first-child {
	color: var(--ll-ink);
}

.ll-legal__section a {
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Programsida — kursgrupper och kurstabellens rader.

   Follows event-management-mockup.html for structure and measurements, but is
   written against this file's own tokens rather than the mockup's private
   :root — the mockup declares its own --teal-50 etc., which are the same values
   this theme already has as --ll-teal-50.

   The two collapse mechanisms are load-bearing and deliberate; see the header
   of inc/program-page.php. Neither uses JavaScript, and in both cases the
   content is in the server-rendered HTML whether open or closed, because the
   ISBN behind the row chevron has to be indexable.
   --------------------------------------------------------------------------- */

/* ---- kursgrupp ---- */
.ll-course {
	margin-bottom: 9px;
}

.ll-course__head {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	padding: 11px 13px;
	background: var(--ll-surface);
	border: 1px solid var(--ll-border);
	border-radius: 10px;
	cursor: pointer;
	user-select: none;
	list-style: none;
}

/* The default disclosure triangle would sit beside our own chevron. */
.ll-course__head::-webkit-details-marker {
	display: none;
}

.ll-course__head:hover {
	border-color: var(--ll-blue-100);
}

.ll-course[open] > .ll-course__head {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.ll-course__name {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ll-blue-900);
}

.ll-course__count {
	margin-left: auto;
	font-size: 12px;
	color: var(--ll-muted);
}

.ll-course__chev {
	display: inline-flex;
	margin-left: 8px;
	color: var(--ll-muted);
	transition: transform 0.16s;
}

.ll-course__chev svg {
	width: 17px;
	height: 17px;
}

.ll-course[open] > .ll-course__head .ll-course__chev {
	transform: rotate(180deg);
}

.ll-course__rows {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 10px;
	background: #f6f7f9;
	border: 1px solid var(--ll-border);
	border-top: none;
	border-radius: 0 0 10px 10px;
}

/* ---- bokrad ---- */
.ll-brow {
	background: var(--ll-surface);
	border: 1px solid var(--ll-border);
	border-radius: 12px;
	overflow: hidden;
}

/* Visually hidden but still focusable, so the row facts can be opened from the
   keyboard. `display:none` or `hidden` would take it out of the tab order and
   leave the label clickable by mouse only. */
.ll-brow__toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.ll-brow__main {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 12px 14px;
}

.ll-brow__cover {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 60px;
	border-radius: 5px;
	background: var(--ll-teal-50);
	color: var(--ll-teal-400);
	overflow: hidden;
}

.ll-brow__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ll-brow__cover-icon svg {
	width: 19px;
	height: 19px;
}

.ll-brow__body {
	flex: 1;
	min-width: 0;
}

.ll-brow__title {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-bottom: 3px;
}

.ll-brow__title a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ll-ink);
	text-decoration: none;
}

.ll-brow__title a:hover,
.ll-brow__title a:focus-visible {
	color: var(--ll-blue-800);
	text-decoration: underline;
}

.ll-brow__sub {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ll-muted);
}

.ll-brow__dot {
	margin: 0 2px;
}

.ll-brow__right {
	flex-shrink: 0;
	min-width: 112px;
	text-align: right;
}

/* "Riktpris" rides above the price only for a book that is not in stock. */
.ll-brow__pricelabel {
	display: block;
	margin-bottom: 1px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ll-muted);
}

.ll-brow__price {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
}

.ll-brow__price .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
}

.ll-brow__chev {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 27px;
	height: 27px;
	border: 1px solid var(--ll-border);
	border-radius: 50%;
	color: var(--ll-muted);
	cursor: pointer;
}

.ll-brow__chev svg {
	width: 14px;
	height: 14px;
	transition: transform 0.15s;
}

.ll-brow__chev:hover {
	border-color: var(--ll-blue-100);
}

.ll-brow__toggle:focus-visible ~ .ll-brow__main .ll-brow__chev {
	outline: 2px solid var(--ll-blue-400);
	outline-offset: 2px;
}

.ll-brow__toggle:checked ~ .ll-brow__main .ll-brow__chev svg {
	transform: rotate(180deg);
}

/* The facts are in the markup either way; this only hides them. */
.ll-brow__details {
	display: none;
	padding: 13px 15px;
	border-top: 1px solid var(--ll-border);
	background: #fafafa;
}

.ll-brow__toggle:checked ~ .ll-brow__details {
	display: block;
}

.ll-bookfacts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 11px;
	font-size: 12px;
}

.ll-bookfacts p {
	margin: 0;
	line-height: 1.5;
}

.ll-bookfacts__k {
	display: block;
	font-size: 11px;
	color: var(--ll-muted);
}

/* ---- pillar ---- */
.ll-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.ll-badge--teal {
	background: var(--ll-teal-50);
	color: var(--ll-teal-800);
}

/* The mockup had this in a violet of its own, which was the only colour on the
   page belonging to no scale. Teal, like the rest: these are Varberg courses.
   The monospace face and letter-spacing are what set the code apart from the
   Varberg and Återköp pills, not a different hue. */
.ll-badge--course {
	background: var(--ll-teal-50);
	color: var(--ll-teal-800);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0.02em;
}

.ll-badge__icon svg {
	width: 13px;
	height: 13px;
}

/* ---- lagerstatus ----

   ⚠️ EN PRICK, PÅ ALLA FYRA STÄLLEN. The owner saw Google render the shop's own
   availability as "● I lager" in a search result (2026-09-11) and wanted the
   same mark on the site — the dot is read before the words are, and it is the
   fastest way to say "this one exists, you can have it today".

   The rules are written against BOTH the theme's own class and WooCommerce's
   `.stock.in-stock`, because the four surfaces are not built by the same code:
   the course table and the shelf cards are ours, the grid card and the product
   page are WooCommerce's. One appearance, four origins.

   Out of stock deliberately gets no dot. A mark that appears either way stops
   meaning anything, and "Slut i lager" already says it plainly. */
.ll-stock--in,
.woocommerce .stock.in-stock,
.stock.in-stock {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	color: var(--ll-teal-800);
	font-weight: 600;
}

/* Baseline-aligned rather than centred: next to a capital I the optical centre
   of a 7px circle sits slightly high, and `top` on a relatively positioned
   pseudo-element is the only way to nudge it that survives a font change. */
.ll-stock--in::before,
.woocommerce .stock.in-stock::before,
.stock.in-stock::before {
	position: relative;
	top: -1px;
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ll-teal-400);
	content: "";
}

.ll-stock--out,
.woocommerce .stock.out-of-stock,
.stock.out-of-stock {
	color: #8a3b3b;
	font-weight: 600;
}

/* På remskortet: en egen rad strax ovanför priset. */
.ll-shelf-card__stock {
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.4;
}

/* ---- radens enda knapp ----
   The in-stock button is WooCommerce's own loop markup, so it arrives carrying
   .button and .ajax_add_to_cart; these rules only restyle it. */
.ll-brow .ll-btn,
.ll-brow a.button {
	display: inline-block;
	padding: 6px 13px;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.ll-brow .ll-btn--solid {
	background: var(--ll-blue-800);
	border: 1px solid var(--ll-blue-800);
	color: #fff;
}

.ll-brow .ll-btn--solid:hover {
	background: var(--ll-blue-900);
	border-color: var(--ll-blue-900);
}

.ll-brow .ll-btn--outline {
	background: var(--ll-surface);
	border: 1px solid var(--ll-border);
	color: var(--ll-blue-800);
}

.ll-brow .ll-btn--outline:hover {
	border-color: var(--ll-blue-400);
}

/* WooCommerce's "Visa varukorg" link appears after an AJAX add; keep it from
   stretching the column. */
.ll-brow .added_to_cart {
	display: block;
	margin-top: 5px;
	font-size: 11.5px;
}

@media (max-width: 689.98px) {
	/* Cover + title on the first line, price + action on the second.

	   flex-wrap alone does NOT do this: .ll-brow__body carries min-width:0 so
	   that long titles can wrap, which also lets it shrink to nothing rather
	   than pushing the price column onto a new line. The result was a subline
	   one character wide. The floor on the body is what forces the wrap. */
	.ll-brow__main {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	.ll-brow__body {
		min-width: 120px;
	}

	.ll-brow__chev {
		order: 3;
		margin-left: auto;
	}

	.ll-brow__right {
		order: 4;
		/* The 57px indent aligns it under the title, so the basis has to be the
		   remaining width — a flat 100% plus a left margin is 57px too wide and
		   the button gets clipped by the card's overflow:hidden. */
		flex: 0 0 calc(100% - 57px);
		min-width: 0;
		margin-left: 57px;
		text-align: left;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 4px 10px;
	}

	.ll-brow__pricelabel {
		margin-bottom: 0;
	}

	.ll-brow__price {
		margin: 0;
	}
}

/* ---- programsidans introblock ----
   Everything between the H1 and the first course group is the owner's own
   content, so it must land on the brief's scale rather than on whatever
   Blocksy hands the `program` post type.

   The sizes and weights were already correct through `body h2` / `body h3`;
   what was wrong is the COLOUR. Blocksy sets --theme-text-color: #3A4F66 on
   :root and every page inherits it, which is the light blue-grey. The brief
   gives colours for H2 (#444) and H3 (#555) but none for body text, so this
   uses the theme's own ink token — the same value the mockup calls --ink.

   ⚠️ This pins the INTRO only. Every other page on the site still renders body
   text in Blocksy's #3A4F66 — this block is now the odd one out, deliberately,
   because that is what was asked for. Changing it site-wide is one declaration
   (--theme-text-color on :root); see the 2026-08-21 deploy record in AGENT.md. */
.ll-programpage__intro p,
.ll-programpage__intro li {
	font-size: 15px;
	line-height: 1.65;
	color: var(--ll-ink);
}

.ll-programpage__intro h2 {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--ll-h2-color);
}

.ll-programpage__intro h3 {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0;
	color: var(--ll-h3-color);
}

/* The callout keeps its own amber palette — it is a deliberate exception to the
   body colour above, not something that should inherit it. */
.ll-programpage__intro .ll-note--warning p {
	color: var(--ll-amber-800);
}

/* Same rhythm above the first course group as between the groups, which is the
   9px .ll-course carries as its bottom margin. */
.ll-programpage__intro > *:last-child {
	margin-bottom: 0;
}

.ll-programpage__courses {
	margin-top: 9px;
}


/* ---- programsidans intro ----
   Same shape as Student i Varberg: a tinted lead panel, then any further
   paragraphs as plain cards, then the amber caveat.

   TEAL, like Varberg. The brief reserves teal for Varberg / local pickup /
   återköp, and a programme page is not obviously one of those — but every book
   here carries the Varberg category and badge, and the page is reached from
   Student i Varberg. The colour tracks the offer, not the URL. */
.ll-programpage__hero {
	/* 9px is what the course groups carry, so panel -> card -> callout -> first
	   group reads as one rhythm rather than four different gaps. */
	margin-bottom: 9px;
	padding: 20px 22px;
	border-radius: var(--ll-radius);
	background: var(--ll-teal-50);
}

.ll-programpage__hero p {
	color: var(--ll-teal-800);
}

.ll-programpage__hero .ll-programpage__panel-title {
	color: var(--ll-teal-900);
}

.ll-programpage__hero a {
	color: var(--ll-teal-900);
	font-weight: 600;
}

/* Second and later intro paragraphs: the standard white card. */
.ll-programpage__panel {
	margin-bottom: 9px;
	padding: 18px 22px;
}

.ll-programpage__panel p {
	color: var(--ll-ink);
}

/* The lead line of each intro block, promoted from the copy's own first line. */
.ll-programpage__panel-title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--ll-blue-900);
}

.ll-programpage__hero p,
.ll-programpage__panel p {
	max-width: 720px;
	font-size: 15px;
	line-height: 1.65;
}

.ll-programpage__hero p:last-child,
.ll-programpage__panel p:last-child {
	margin-bottom: 0;
}

.ll-programpage__note {
	margin-bottom: 0;
}

/* The caveat is written as an aside and keeps its emphasis. `.ll-note__body em`
   normalises italics for the notes elsewhere on the site, so this re-asserts it
   for this one. */
.ll-programpage__note .ll-note__body em {
	font-style: italic;
}

/* ---- sidrubriken och hero som EN yta ----
   The brief for this page asked for the title and the panel's own lead to read
   as one block. The title is rendered by the template, outside .entry-content,
   so it cannot be moved into the panel from the content filter.

   Rather than emit a second <h1> in the content and hide the template's — which
   leaves two headings in the DOM for a screen reader to find — the two elements
   are joined visually: the header takes the tint and the top corners, the panel
   takes the bottom ones, and the seam between them is removed. One <h1>, one
   surface.

   Scoped to .single-program so no other page's header is touched. */
/* The title is wrapped in Blocksy's .hero-section, and it is that wrapper
   which carries the 40px below the header — the header itself measures 0. */
body.ll-programpage-active .hero-section {
	margin-bottom: 0;
}

body.ll-programpage-active .entry-header {
	margin-bottom: 0;
	padding: 20px 22px 4px;
	border-radius: var(--ll-radius) var(--ll-radius) 0 0;
	background: var(--ll-teal-50);
}

/* Leading `body` is needed, not decoration: the theme's own rule is
   `body[data-prefix] .entry-header .page-title`, which outranks a three-class
   selector. Matching `body` levels the specificity and this rule, being later,
   wins — the same trick the header block near the top of this file documents. */
body.ll-programpage-active .entry-header .page-title,
body.ll-programpage-active .entry-header .entry-title {
	--theme-font-size: 22px;
	margin-bottom: 2px;
	/* Down from 26px: inside the panel it sits above a second heading, and at
	   full size the two competed instead of reading as title and lead. */
	font-size: 22px;
	line-height: 1.25;
	color: var(--ll-teal-900);
}

body.ll-programpage-active .ll-programpage__hero {
	margin-top: 0;
	padding-top: 6px;
	border-radius: 0 0 var(--ll-radius) var(--ll-radius);
}

/* ---- noterna under tabellen ----
   A clear break rather than the 9px the course groups use between themselves:
   these notes are not another course, and at 9px the last group and the first
   note read as one stack. */
.ll-programpage__after {
	margin-top: 40px;
}

.ll-programpage__after > * {
	margin-bottom: 9px;
}

.ll-programpage__after > *:last-child {
	margin-bottom: 0;
}

/* Page-level statement that the stock is second hand. Said once, above the
   course list, instead of a word on every row. */
.ll-programpage__usednote {
	/* 9px ABOVE as well. Whatever closes the intro — the teal panel, or since
	   2026-09-15 the amber edition caveat — ends on margin-bottom 0 (it is the
	   intro's last child), so without a top margin this line sat flush against
	   the box above it. It collapses with .ll-programpage__courses below, so the
	   gap under it stays 9px. */
	margin: 9px 0;
	font-size: 12.5px;
	color: var(--ll-muted);
}

/* ---- återköpsfönster ----
   Inside the teal scale, no new colours. The next window is ringed and carries
   the flag; the other three are the filled tint. Passed windows are grey with
   the amount struck through — a state the pre-purchase view can never reach,
   because it always renders from today. It occurs on the ORDER, where the
   windows were frozen at purchase and time keeps moving; see the block for
   .ll-order-buyback further down and inc/buyback-order.php. */
.ll-windows {
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid var(--ll-border);
}

.ll-windows__intro {
	margin: 0 0 9px;
	font-size: 12.5px;
	color: var(--ll-muted);
}

.ll-windows__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
	gap: 8px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.ll-window {
	position: relative;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--ll-teal-50);
	color: var(--ll-teal-900);
}

/* The next window is the one that matters most, so it is the one that is
   outlined rather than the one that is loudest. */
.ll-window--next {
	border-color: var(--ll-teal-600);
	background: var(--ll-surface);
}

.ll-window__flag {
	position: absolute;
	top: -9px;
	left: 10px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--ll-teal-600);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ll-window__label {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ll-teal-800);
}

.ll-window__date {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 600;
}

.ll-window__amount {
	display: block;
	margin-top: 2px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

.ll-window__percent {
	display: block;
	font-size: 11px;
	color: var(--ll-teal-800);
}

.ll-windows__summary {
	margin: 0;
	padding: 9px 12px;
	border-radius: 8px;
	background: var(--ll-teal-50);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ll-teal-900);
}

/* ---- kompakt återköpsrad i kurstabellen ---- */
.ll-brow__buyback {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 3px;
	font-size: 12px;
	color: var(--ll-teal-800);
}

.ll-brow__buyback strong {
	color: var(--ll-teal-900);
}

.ll-brow__buyback-icon svg {
	width: 13px;
	height: 13px;
}

/* ---- återköpserbjudandet på produktsidan ---- */
.ll-buyback-offer {
	margin: 18px 0;
	padding: 18px;
	border: 1px solid var(--ll-border);
	border-radius: var(--ll-radius);
	background: var(--ll-surface);
}

.ll-buyback-offer__title {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 600;
	color: var(--ll-ink);
}

.ll-buyback-offer .ll-windows {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.ll-buyback-offer__terms {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--ll-muted);
}

.ll-buyback-off {
	margin: 18px 0;
}

/* ---- varukorgen ---- */
.ll-cart-buyback {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ll-teal-800);
}

.ll-cart-buyback__label {
	display: block;
	font-weight: 600;
	color: var(--ll-teal-900);
}

.ll-cart-buyback__win {
	display: inline-block;
	margin: 3px 6px 0 0;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ll-teal-50);
	white-space: nowrap;
}

/* When the basket is being shipped the offer does not apply, and the line says
   so in the amber the rest of the site uses for caveats. */
.ll-cart-buyback--off {
	color: var(--ll-amber-800);
}

/* ---- produktsidan: spec och märkning ---- */
.ll-prodbadge {
	margin: 0 0 8px;
}

/* Författare och ISBN under boktiteln — se inc/product-single.php.
   Deliberately quiet: it is a byline, not a fact the eye should stop at on the
   way to the price. Small, muted, one line. */
.ll-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	margin: -2px 0 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ll-muted);
}

.ll-byline__author {
	font-weight: 600;
	color: var(--ll-ink);
}

/* Tabular figures so the digits line up and read as a number rather than as
   words — an ISBN is a reference, and it should look like one. */
.ll-byline__isbn {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

.ll-byline__sep {
	opacity: 0.45;
}

.ll-badge--blue {
	background: var(--ll-blue-50);
	color: var(--ll-blue-800);
}

.ll-spec {
	margin: 18px 0;
}

.ll-spec__condition {
	margin-bottom: 14px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--ll-teal-50);
}

.ll-spec__condition-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ll-teal-800);
}

.ll-spec__condition-value {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--ll-teal-900);
}

.ll-spec__condition-note {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--ll-teal-800);
}

.ll-spec__list {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ll-border);
}

.ll-spec__row {
	display: flex;
	gap: 14px;
	padding: 8px 0;
	border-bottom: 1px solid var(--ll-border);
	font-size: 14px;
}

.ll-spec__row dt {
	flex: 0 0 128px;
	margin: 0;
	color: var(--ll-muted);
	font-weight: 400;
}

.ll-spec__row dd {
	margin: 0;
	color: var(--ll-ink);
}

/* A row can carry the same fact written several ways. The ISBN does: the bare
   thirteen digits, then the two hyphenated forms a course syllabus uses. */
.ll-spec__line {
	display: block;
}

/* The canonical form leads and keeps full weight; the alternatives speak more
   quietly. Three numbers of equal loudness would read as padding rather than
   as one fact written for three different readers. */
.ll-spec__line + .ll-spec__line {
	color: var(--ll-muted);
	font-size: 13px;
}

.ll-prodcourse {
	margin: 14px 0 0;
	font-size: 13.5px;
}

.ll-prodcourse a {
	font-weight: 600;
}

@media (max-width: 559.98px) {
	.ll-spec__row {
		flex-direction: column;
		gap: 1px;
	}

	.ll-spec__row dt {
		flex: none;
		font-size: 12px;
	}
}

/* ==========================================================================
   Varukorgen som alltid syns — flytande knapp och utfällbar panel
   ========================================================================== */

/* ⚠️ POSITIONEN ÄR HALVA POÄNGEN. Knappen ska sitta fast i nedre högra hörnet;
   utan det hamnar den sist i dokumentflödet, alltså längst ner till vänster
   under sidfoten. Det hände en gång, när den här regeln skrevs om och de fyra
   första raderna föll bort. */
.ll-cart-fab {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9998;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 18px 11px 13px;
	border: 0;
	border-radius: 999px;
	background: var(--ll-blue-800);
	box-shadow: 0 6px 20px rgba(16, 39, 63, 0.30);
	color: #fff;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ll-cart-fab:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(16, 39, 63, 0.28);
}

/* Ikonen och räknaren sitter ihop, så siffran läses som "i korgen" och inte
   som en avisering. */
.ll-cart-fab__mark {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
}

.ll-cart-fab__icon {
	display: flex;
}

.ll-cart-fab__icon svg {
	width: 21px;
	height: 21px;
	stroke: #fff;
}

.ll-cart-fab__count {
	position: absolute;
	top: -5px;
	right: -7px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border: 2px solid var(--ll-blue-800);
	border-radius: 999px;
	background: var(--ll-teal-400);
	font-size: 11px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
	color: #fff;
}

/* Tom korg: bara ikon och ordet, ingen prislapp. */
.ll-cart-fab__label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-right: 6px;
	line-height: 1.25;
}

.ll-cart-fab__text {
	font-size: 13px;
	font-weight: 600;
}

.ll-cart-fab__total {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 600px) {
	.ll-cart-fab:not(.has-items) .ll-cart-fab__label {
		display: none;
	}

	.ll-cart-fab:not(.has-items) {
		padding: 12px;
	}
}

.ll-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
}

.ll-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(22, 40, 63, 0.38);
}

.ll-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(380px, 100%);
	height: 100%;
	background: var(--ll-surface);
	box-shadow: -8px 0 24px rgba(22, 40, 63, 0.18);
}

.ll-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--ll-border);
}

.ll-drawer__heading {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--ll-ink);
}

.ll-drawer__close {
	border: 0;
	background: none;
	color: var(--ll-muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.ll-drawer__inner {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	padding: 16px 18px;
}

/* ---- fraktstapel ---- */
.ll-drawer__ship {
	margin-bottom: 14px;
}

.ll-drawer__ship-text {
	margin: 0 0 6px;
	font-size: 12.5px;
	color: var(--ll-ink);
}

.ll-drawer__bar {
	height: 6px;
	border-radius: 999px;
	background: var(--ll-border);
	overflow: hidden;
}

.ll-drawer__bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--ll-teal-600);
	transition: width 0.3s;
}

.ll-drawer__ship--done .ll-drawer__bar span {
	background: var(--ll-teal-400);
}

.ll-drawer__pickup {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	padding: 9px 11px;
	border-radius: 8px;
	background: var(--ll-teal-50);
	font-size: 12.5px;
	color: var(--ll-teal-900);
}

.ll-drawer__pickup-icon svg {
	width: 15px;
	height: 15px;
}

/* ---- rader ---- */
.ll-drawer__items {
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.ll-drawer__item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 11px 0;
	border-bottom: 1px solid var(--ll-border);
}

.ll-drawer__thumb img {
	display: block;
	width: 42px;
	height: 56px;
	object-fit: cover;
	border-radius: 4px;
}

.ll-drawer__body {
	flex: 1;
	min-width: 0;
}

.ll-drawer__title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ll-ink);
	text-decoration: none;
}

.ll-drawer__meta {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--ll-muted);
}

.ll-drawer__remove {
	flex: 0 0 auto;
	color: var(--ll-muted);
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}

/* ---- fot ---- */
.ll-drawer__foot {
	padding-top: 14px;
	border-top: 1px solid var(--ll-border);
}

.ll-drawer__total {
	display: flex;
	justify-content: space-between;
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ll-ink);
}

.ll-drawer__checkout,
.ll-drawer__shop {
	display: block;
	padding: 11px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.ll-drawer__checkout {
	background: var(--ll-blue-800);
	border: 1px solid var(--ll-blue-800);
	color: #fff;
}

.ll-drawer__cartlink {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	text-align: center;
	color: var(--ll-muted);
}

.ll-drawer__empty {
	margin: 0 0 12px;
	color: var(--ll-muted);
}

.ll-drawer__shop {
	border: 1px solid var(--ll-border);
	color: var(--ll-blue-800);
}

body.ll-drawer-open {
	overflow: hidden;
}

/* The admin bar overlays the top of the panel for logged-in users; customers
   never see it, but the owner reviews the site logged in. */
body.admin-bar .ll-drawer__panel {
	top: 32px;
	height: calc(100% - 32px);
}

@media (max-width: 782px) {
	body.admin-bar .ll-drawer__panel {
		top: 46px;
		height: calc(100% - 46px);
	}
}

/* The theme colours links globally, which reached inside the solid button. */
.ll-drawer__checkout,
.ll-drawer__checkout:hover,
.ll-drawer__checkout:focus {
	color: #fff;
}

.ll-drawer__checkout:hover {
	background: var(--ll-blue-900);
	border-color: var(--ll-blue-900);
}

/* Non-Varberg titles take the base blue for the condition block: teal is
   reserved for Varberg / pickup / buyback, and a green block on a national book
   implied an offer it does not have. */
.ll-spec__condition--blue {
	background: var(--ll-blue-50);
}

.ll-spec__condition--blue .ll-spec__condition-label,
.ll-spec__condition--blue .ll-spec__condition-note {
	color: var(--ll-blue-800);
}

.ll-spec__condition--blue .ll-spec__condition-value {
	color: var(--ll-blue-900);
}

/* ==========================================================================
   Butikssidan och varukorgsförslag
   ========================================================================== */

/* ---- kategorirad ---- */
.ll-shopcats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

/* Under the grid on a category archive, where the pills stop being the thing to
   act on and become where to go next. The hairline is what makes that switch
   legible: without it the row reads as a stray second header that drifted to
   the bottom of the page. */
.ll-shopcats--below {
	margin: 34px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--ll-border);
}

.ll-shopcat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border: 1px solid var(--ll-border);
	border-radius: 999px;
	background: var(--ll-surface);
	font-size: 13px;
	font-weight: 600;
	color: var(--ll-blue-800);
	text-decoration: none;
}

.ll-shopcat:hover {
	border-color: var(--ll-blue-400);
}

.ll-shopcat.is-current {
	background: var(--ll-blue-800);
	border-color: var(--ll-blue-800);
	color: #fff;
}

.ll-shopcat__count {
	font-size: 11px;
	font-weight: 500;
	opacity: 0.75;
}

.ll-shop-usednote {
	margin: 0 0 18px;
	font-size: 12.5px;
	color: var(--ll-muted);
}

/* ---- produktkort ---- */
.woocommerce ul.products li.product {
	position: relative;
	padding: 12px;
	border: 1px solid var(--ll-border);
	border-radius: var(--ll-radius);
	background: var(--ll-surface);
}

.woocommerce ul.products li.product:hover {
	border-color: var(--ll-blue-100);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding-top: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ll-ink);
}

.ll-card-meta {
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--ll-muted);
}

.ll-card-cond {
	display: inline-block;
	margin: 6px 0 0;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
}

.ll-card-cond--teal {
	background: var(--ll-teal-50);
	color: var(--ll-teal-800);
}

.ll-card-cond--blue {
	background: var(--ll-blue-50);
	color: var(--ll-blue-800);
}

.ll-card-cond--out {
	background: #f4eaea;
	color: #8a3b3b;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin-top: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ll-ink);
}

/* ---- utforska mer ----
   Ämnen, inte fraktjakt. Se inc/cart-suggestions.php för varför tröskeln inte
   längre styr vad som föreslås. */
.ll-explore {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--ll-border);
}

.ll-explore__head {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ll-muted);
}

.ll-explore__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ll-explore__link {
	display: block;
	padding: 11px 13px;
	border: 1px solid var(--ll-border);
	border-radius: 10px;
	background: var(--ll-surface);
	text-decoration: none;
}

.ll-explore__link:hover,
.ll-explore__link:focus-visible {
	border-color: var(--ll-blue-400);
	background: var(--ll-blue-50);
}

/* Kategorin kunden redan handlat ur får den varmare tonen — den är ett svar på
   något de visat, inte ett allmänt förslag. */
.ll-explore__item--related .ll-explore__link {
	border-color: var(--ll-teal-50);
	background: #F5FBF9;
}

.ll-explore__item--related .ll-explore__link:hover {
	border-color: var(--ll-teal-400);
}

.ll-explore__name {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ll-ink);
}

.ll-explore__meta {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	color: var(--ll-muted);
}

.ll-drawer .ll-explore__list {
	grid-template-columns: 1fr 1fr;
}


/* ==========================================================================
   Butikens sidhuvud — ett block: etikett, rubrik, ingress och sökruta

   ⚠️ THE WHOLE HEADER IS THE THEME'S, AND THAT IS THE POINT. Blocksy renders
   the shop title inside its own full-width hero band and fires
   `woocommerce_archive_description` OUTSIDE it, so anything rendered on that
   hook — the search field — landed under the band. Tinting the band therefore
   coloured the title and stopped short of the field, splitting the header in
   two. Building all four parts in one container is what lets them share a
   surface.

   Blocksy's hero is hidden below rather than replaced: its markup is the
   parent theme's to change, and hiding it costs nothing while its title is
   re-rendered here.
   ========================================================================== */

body.woocommerce-shop .hero-section {
	display: none;
}

.ll-shophead {
	margin: 0 0 26px;
	padding: 42px 32px 38px;
	border: 1px solid var(--ll-blue-100);
	border-radius: 18px;
	/* Light from the top, fading to the surface, so the panel has depth without
	   becoming a slab of flat colour behind the text. */
	background:
		radial-gradient(130% 150% at 50% 0%, #DCEBFA 0%, #EFF6FD 42%, var(--ll-surface) 100%);
	text-align: center;
}

/* ---- etiketten över rubriken ----
   Colour that also carries the fact most likely to change what someone puts in
   a basket. */
.ll-shophead__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--ll-teal-50);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--ll-teal-800);
}

.ll-shophead__eyebrow-icon svg {
	width: 15px;
	height: 15px;
}

.ll-shophead__title {
	margin: 0;
	/* The 26px floor is the phone cap the heading tests hold every page to. */
	font-size: clamp(26px, 4.4vw, 44px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--ll-blue-800);
}

.ll-shophead__intro {
	margin: 0;
}

.ll-shophead__intro p {
	max-width: 46ch;
	margin: 14px auto 0;
	font-size: 16.5px;
	line-height: 1.6;
	/* A blue-leaning slate rather than the flat --ll-muted grey, which read as
	   washed out against the tint. */
	color: #4B5F77;
}

/* ---- sökfältet ----

   ⚠️ SPECIFICITY IS LOAD-BEARING HERE. FiboSearch's "pirx" stylesheet is
   enqueued after the child theme's and matches at the same weight, so a rule
   written against `.dgwt-wcas-search-input` alone loses on source order and
   silently keeps the plugin's grey pill. Every rule below goes one class deeper
   than the plugin's own. */
.ll-shopsearch {
	max-width: 560px;
	margin: 26px auto 0;
}

.ll-shopsearch .dgwt-wcas-search-wrapp {
	max-width: 100% !important;
	width: 100%;
	margin: 0 auto;
}

.ll-shopsearch .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	height: auto;
	/* Left padding clears the magnifier the plugin positions over the field. */
	padding: 15px 20px 15px 48px;
	border: 1px solid var(--ll-blue-100);
	border-radius: 12px;
	background-color: var(--ll-surface);
	box-shadow: 0 2px 10px rgba(31, 58, 95, 0.08);
	font-family: inherit;
	font-size: 15.5px;
	line-height: 22px;
	color: var(--ll-ink);
}

.ll-shopsearch .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
	color: #7C8CA0;
}

.ll-shopsearch .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover {
	background-color: var(--ll-surface);
	border-color: var(--ll-blue-400);
}

.ll-shopsearch .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus {
	border-color: var(--ll-blue-400);
	box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.18);
	outline: none;
}

/* The magnifier ships in a mid grey that disappears against the tint. */
.ll-shopsearch .dgwt-wcas-ico-magnifier,
.ll-shopsearch .dgwt-wcas-ico-magnifier-handler {
	fill: var(--ll-blue-400);
	color: var(--ll-blue-400);
}

/* ---- kategorisidornas rubrik ----
   No panel: a category page has a title and nothing else, so the same box
   would render as an empty slab above the grid. */
body.tax-product_cat .hero-section[data-type="type-2"] {
	background: transparent;
}

.tax-product_cat .hero-section .entry-header {
	max-width: var(--theme-container-width);
	min-height: 0;
	padding: 26px 0 4px;
	text-align: center;
}

.tax-product_cat .hero-section .page-title {
	margin: 0;
	font-size: clamp(26px, 3.4vw, 34px);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--ll-blue-800);
}

/* The pills continue the centred column the header starts, so the two are one
   header rather than a centred block sitting on a left-aligned one. Blocksy's
   60px container padding put a gap between them that read as a section break. */
.woocommerce-shop .site-main > .ct-container,
.tax-product_cat .site-main > .ct-container {
	padding-top: 26px;
}

.woocommerce-shop .ll-shopcats,
.tax-product_cat .ll-shopcats {
	justify-content: center;
}

.woocommerce-shop .ll-shop-usednote,
.tax-product_cat .ll-shop-usednote {
	text-align: center;
}


/* ---- Blocksys slutsåld-etikett ----

   The parent theme stamps a black badge across the cover of anything out of
   stock, and its text has been set to "Intresseanmälan" in the Customizer.
   That is the old interest route: a label that looks like a button, sits on
   top of the Varberg badge, and cannot be clicked. It is replaced by the
   "Slut i lager" line and the real Anmäl intresse button on the card below.

   ⚠️ Hidden in CSS on purpose. The badge and its wording are a theme mod,
   which lives in the database and does not deploy; a stylesheet rule does. */
.woocommerce ul.products li.product .out-of-stock-badge {
	display: none;
}

/* ---- Varberg-hyllans förklaring ---- */
.ll-shop-varbergnote {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: -8px 0 18px;
	padding: 9px 12px;
	border-radius: 8px;
	background: var(--ll-teal-50);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ll-teal-800);
}

.ll-shop-varbergnote__icon svg {
	width: 15px;
	height: 15px;
	margin-top: 1px;
}

/* ---- märken på kortet ---- */
.ll-card-badges {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-width: calc(100% - 36px);
}

/* ---- slutsålt kort: anmäl intresse i stället för "Läs mer" ---- */
.woocommerce ul.products li.product .ll-card-interest {
	display: inline-block;
	margin-top: 10px;
	padding: 7px 14px;
	border: 1px solid var(--ll-blue-400);
	border-radius: 8px;
	background: var(--ll-surface);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ll-blue-800);
}

.woocommerce ul.products li.product .ll-card-interest:hover {
	background: var(--ll-blue-50);
}

/* ==========================================================================
   Startsidan, fas 2 — kategorier och två bokremsor

   The two rows are the site's two kinds of stock, wearing the same tones as
   everywhere else: teal is collected in Varberg, blue is posted. See the header
   of inc/home-rows.php.
   ========================================================================== */

.ll-homerows {
	margin: 46px 0 8px;
}

/* ---- kategorier ---- */
.ll-homecats {
	margin-bottom: 42px;
}

.ll-homecats__title {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 600;
	color: var(--ll-ink);
}

/* ---- remsa ---- */
.ll-shelf {
	margin-bottom: 42px;
}

.ll-shelf__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

.ll-shelf__headings {
	min-width: 0;
}

/* A short rule in the row's own tone, so the two rows are told apart before a
   single badge is read. */
.ll-shelf__title {
	position: relative;
	margin: 0;
	padding-left: 13px;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ll-ink);
}

.ll-shelf__title::before {
	content: "";
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 0;
	width: 4px;
	border-radius: 999px;
}

.ll-shelf--teal .ll-shelf__title::before {
	background: var(--ll-teal-800);
}

.ll-shelf--blue .ll-shelf__title::before {
	background: var(--ll-blue-800);
}

.ll-shelf__sub {
	max-width: 60ch;
	margin: 5px 0 0 13px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ll-muted);
}

.ll-shelf__tools {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.ll-shelf__all {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ll-blue-800);
	text-decoration: none;
	white-space: nowrap;
}

.ll-shelf__all:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ll-shelf__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--ll-border);
	border-radius: 999px;
	background: var(--ll-surface);
	color: var(--ll-ink);
	cursor: pointer;
}

.ll-shelf__arrow:hover:not(:disabled) {
	border-color: var(--ll-blue-400);
	color: var(--ll-blue-800);
}

.ll-shelf__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* The arrows are a convenience over native scrolling, so they are hidden when
   the row fits and there is nothing to scroll to. */
.ll-shelf:not(.is-scrollable) .ll-shelf__arrow {
	display: none;
}

.ll-shelf__arrow-icon svg {
	width: 18px;
	height: 18px;
}

/* ---- spåret ---- */
.ll-shelf__track {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 2px 2px 6px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.ll-shelf__track::-webkit-scrollbar {
	display: none;
}

/* ---- kort ---- */
.ll-shelf-card {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	width: 208px;
	padding: 12px;
	border: 1px solid var(--ll-border);
	border-radius: var(--ll-radius);
	background: var(--ll-surface);
	scroll-snap-align: start;
}

.ll-shelf-card:hover {
	border-color: var(--ll-blue-100);
}

.ll-shelf-card__cover {
	display: block;
	margin-bottom: 10px;
	border-radius: 8px;
	overflow: hidden;
	background: #f4f6f8;
}

.ll-shelf-card__cover img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: contain;
}

.ll-shelf-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 7px;
}

.ll-badge--star {
	background: var(--ll-amber-50);
	color: var(--ll-amber-800);
}

.ll-shelf-card__title {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
}

.ll-shelf-card__title a {
	color: var(--ll-ink);
	text-decoration: none;
}

.ll-shelf-card__title a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ll-shelf-card__meta {
	margin: 3px 0 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--ll-muted);
}

.ll-shelf-card .ll-card-cond {
	margin-top: 7px;
}

/* Pushed to the bottom so prices and buttons line up across cards of uneven
   title length. */
.ll-shelf-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
}

.ll-shelf-card__price {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ll-ink);
}

.ll-shelf-card__price .price {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.ll-shelf-card .ll-shelf-card__add {
	padding: 6px 12px;
	border: 1px solid var(--ll-blue-800);
	border-radius: 8px;
	background: var(--ll-blue-800);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	white-space: nowrap;
}

.ll-shelf-card .ll-shelf-card__add:hover {
	background: var(--ll-blue-900, #08304f);
}

.ll-shelf-card .ll-shelf-card__add.added {
	display: none;
}

.ll-shelf-card .added_to_cart {
	padding: 6px 12px;
	border: 1px solid var(--ll-border);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ll-blue-800);
	white-space: nowrap;
	text-decoration: none;
}

@media (max-width: 600px) {
	.ll-shelf__head {
		align-items: flex-start;
		flex-direction: column;
	}

	.ll-shelf-card {
		width: 158px;
	}

	.ll-shelf-card__cover img {
		height: 150px;
	}
}

/* The condition is a pill, not a bar: inside the card's flex column it would
   otherwise stretch to the full width and read as a banner. */
.ll-shelf-card .ll-card-cond {
	align-self: flex-start;
}

/* At 208px wide there is no room for a price and "Lägg till i varukorg" on one
   line, so the button takes the width under the price rather than being
   squeezed against it. */
.ll-shelf-card__foot {
	display: block;
}

.ll-shelf-card__price {
	display: block;
	margin-bottom: 8px;
}

.ll-shelf-card .ll-shelf-card__add,
.ll-shelf-card .added_to_cart {
	display: block;
	text-align: center;
}

.ll-shelf-card .added_to_cart {
	margin-top: 6px;
}

/* ---- kortets läsordning ----

   Blocksy prints the product title from its own card builder, which runs AFTER
   the woocommerce_shop_loop_item_title hook the meta is attached to. The author
   line and the condition therefore landed above the title, so a card read
   "Bo Hejlskov Elvén · Upplaga 1 / Nära nyskick" before it said which book that
   was about.

   The card is a flex column, so the order is restored here rather than by
   fighting the parent theme's card builder for a different hook — the hook it
   would need is not one Blocksy fires. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	order: 1;
}

.woocommerce ul.products li.product .ll-card-meta {
	order: 2;
}

.woocommerce ul.products li.product .ll-card-cond {
	order: 3;
	/* A flex item stretches to the column width; the condition is a pill, and at
	   full width it read as a banner across the card. */
	align-self: flex-start;
}

.woocommerce ul.products li.product .price {
	order: 4;
}

.woocommerce ul.products li.product .entry-meta {
	order: 5;
}

.woocommerce ul.products li.product .ct-woo-card-actions {
	order: 6;
}

.woocommerce ul.products li.product .ct-woo-card-stock {
	order: 7;
}

@media (max-width: 600px) {
	.ll-shophead {
		padding: 30px 18px 28px;
		border-radius: 14px;
	}

	.ll-shophead__intro p {
		font-size: 15px;
	}

	.ll-shopsearch {
		margin-top: 20px;
	}
}

/* ==========================================================================
   Återköpserbjudandet på ordern — tacksidan och Mitt konto

   The same window cards as the product page, in the same teal, plus the one
   state that view can never reach: a window whose date has gone by. See
   inc/buyback-order.php for why the amounts are read rather than recomputed.
   ========================================================================== */

.ll-order-buyback {
	margin: 32px 0;
	padding: 20px 22px;
	border: 1px solid var(--ll-teal-50);
	border-radius: var(--ll-radius);
	background: #F5FBF9;
}

.ll-order-buyback__title {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ll-teal-800);
}

.ll-order-buyback__book {
	margin: 0 0 14px;
	font-size: 14.5px;
	color: var(--ll-ink);
}

.ll-order-buyback__qty {
	font-size: 12.5px;
	color: var(--ll-muted);
}

.ll-order-buyback__lapsed {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ll-muted);
}

.ll-order-buyback .ll-windows__list {
	margin-bottom: 0;
}

.ll-order-buyback__terms {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ll-muted);
}

/* A window that has gone by. Kept visible rather than removed: the customer
   needs to see that the offer was real and that a date passed, otherwise the
   block silently shrinks and reads as a mistake. */
.ll-window--passed {
	background: #F2F4F5;
	color: var(--ll-muted);
	border-color: transparent;
}

.ll-window--passed .ll-window__amount {
	text-decoration: line-through;
}

.ll-window--passed .ll-window__date,
.ll-window--passed .ll-window__label,
.ll-window--passed .ll-window__percent {
	color: var(--ll-muted);
}

/* Vinstmarginalbeskattning — den rad som ersätter en momsrad på kvittot.
   Liten och lågmäld: den är en upplysning, inte ett erbjudande. */
.ll-vmb {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--ll-muted);
}

/* ==========================================================================
   Kassan och tacksidan

   ⚠️ UTSEENDE, INTE FUNKTION. Every rule here is presentation only — no field
   is hidden, no button is moved out of the flow, nothing is reordered in a way
   that changes what WooCommerce submits. The classic checkout is the one place
   on this site where a clever change costs money.
   ========================================================================== */

.woocommerce-checkout .site-main,
.woocommerce-order-received .site-main {
	background: #F8F9FA;
}

/* ---- rubriker och sektioner ---- */
.woocommerce-checkout h3,
.woocommerce-order-received h2,
.woocommerce-order-received h3 {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ll-ink);
}

/* ---- kunduppgifter och ordersammanfattning som kort ---- */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review,
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details,
.woocommerce-order-received .woocommerce-order-overview {
	padding: 22px 24px;
	border: 1px solid var(--ll-border);
	border-radius: var(--ll-radius);
	background: var(--ll-surface);
}

.woocommerce-checkout #order_review,
.woocommerce-order-received .woocommerce-order-details {
	margin-bottom: 22px;
}

/* ---- formulärfält ---- */
.woocommerce-checkout .form-row label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ll-ink);
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection--single {
	padding: 11px 13px;
	border: 1px solid var(--ll-border);
	border-radius: 10px;
	background: var(--ll-surface);
	font-size: 15px;
	color: var(--ll-ink);
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus {
	border-color: var(--ll-blue-400);
	box-shadow: 0 0 0 3px var(--ll-blue-50);
	outline: none;
}

/* ---- ordertabellen ---- */
.woocommerce-checkout table.shop_table,
.woocommerce-order-received table.shop_table {
	border: 0;
	border-radius: 0;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-order-received table.shop_table th {
	padding: 10px 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ll-muted);
}

.woocommerce-checkout table.shop_table td,
.woocommerce-order-received table.shop_table td {
	padding: 12px 0;
	border-top: 1px solid var(--ll-border);
	font-size: 14.5px;
}

.woocommerce-checkout table.shop_table tfoot .order-total td,
.woocommerce-order-received table.shop_table tfoot .order-total td {
	font-size: 17px;
	font-weight: 700;
	color: var(--ll-ink);
}

/* ---- fraktvalen ---- */
.woocommerce-checkout #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout #shipping_method li {
	margin-bottom: 6px;
	padding: 10px 12px;
	border: 1px solid var(--ll-border);
	border-radius: 10px;
	background: var(--ll-surface);
}

.woocommerce-checkout #shipping_method li label {
	font-weight: 500;
}

/* ---- betalningsval ---- */
.woocommerce-checkout .wc_payment_methods {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout .wc_payment_method {
	margin-bottom: 8px;
	padding: 12px 14px;
	border: 1px solid var(--ll-border);
	border-radius: 10px;
	background: var(--ll-surface);
}

.woocommerce-checkout .payment_box {
	margin-top: 10px;
	padding: 12px 14px;
	border-radius: 8px;
	background: #F4F6F8;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ll-muted);
}

.woocommerce-checkout .payment_box::before {
	display: none; /* WooCommerce's grey arrow, which does not match anything else here. */
}

/* ---- lägg beställning ---- */
.woocommerce-checkout #place_order {
	width: 100%;
	padding: 14px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--ll-blue-800);
	font-size: 15.5px;
	font-weight: 700;
	color: #fff;
}

.woocommerce-checkout #place_order:hover {
	background: var(--ll-blue-900, #16283F);
}

/* ---- tacksidans kvittens ---- */
.woocommerce-order-received .woocommerce-notice--success,
.woocommerce-order-received .woocommerce-thankyou-order-received {
	margin-bottom: 22px;
	padding: 16px 18px;
	border: 1px solid var(--ll-teal-50);
	border-radius: var(--ll-radius);
	background: #F5FBF9;
	font-size: 16px;
	font-weight: 600;
	color: var(--ll-teal-800);
}

.woocommerce-order-received ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin: 0 0 22px;
	list-style: none;
}

.woocommerce-order-received ul.woocommerce-order-overview li {
	border: 0;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ll-muted);
}

.woocommerce-order-received ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ll-ink);
}

/* Slutsåld produktsida — vägen vidare i stället för en återvändsgränd.
   Söksidan visar boken, kortet erbjuder intresseanmälan, och den här ser till
   att produktsidan gör samma sak. */
.ll-prodinterest {
	margin: 18px 0;
	padding: 16px 18px;
	border: 1px solid var(--ll-border);
	border-radius: var(--ll-radius);
	background: #FBFCFD;
}

.ll-prodinterest__text {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ll-muted);
}

/* ---- utlämning i Varberg ---- */
.ll-pickup {
	margin: 0 0 22px;
	padding: 18px 20px;
	border: 1px solid var(--ll-teal-50);
	border-radius: var(--ll-radius);
	background: #F5FBF9;
}

.ll-pickup__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ll-teal-800);
}

.ll-pickup__body {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ll-ink);
}

/* Att en postad bok också kan hämtas — märket "Skickas" lästes som ett förbud. */
.ll-pickuphint {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--ll-teal-800);
}

.ll-pickuphint__icon svg {
	width: 15px;
	height: 15px;
}

/* ⚠️ ANTAL OCH PRIS FÅR INTE SITTA IHOP I MEJLET. Båda kolumnerna är
   högerställda, så "×1" och "19,00 kr" hamnade kant i kant och lästes som 119.
   Krysset skrivs ut av WooCommerces egen mall och går inte att flytta utan att
   ta över den, så det är avståndet som får göra jobbet. */
#body_content table.order_details td:nth-child(2),
#body_content table.email-order-details td:nth-child(2) {
	padding-right: 26px !important;
	text-align: center !important;
	color: #6B7280 !important;
	white-space: nowrap;
}

/* Hämtningsraden i en remsas rubrik — samma pin och samma ton som på
   produktsidan, så budskapet känns igen i stället för att läras om. */
.ll-shelf__note {
	margin: 6px 0 0 13px;
}