/* ============================================================================
   Kavos Broliai — theme skin
   Brandbook palette; type carried over from the original Nuxt site:
     #0C203E blue · #F8F8EF cream · #AF8644 gold  (brand book artwork)
     Campton (sans, UI + body) · FF Hertz Pro (serif, headings)
   House rules: radius 0, no shadows, hairlines, brass is the only accent voice.
   ========================================================================= */

/* ── Fonts (licensed originals from the brand folder, subset to woff2) ──── */
@font-face { font-family:"Campton"; font-style:normal; font-weight:300; font-display:swap;
	src:url("../fonts/campton-light.woff2") format("woff2"); }
@font-face { font-family:"Campton"; font-style:normal; font-weight:400; font-display:swap;
	src:url("../fonts/campton-book.woff2") format("woff2"); }
@font-face { font-family:"Campton"; font-style:normal; font-weight:500; font-display:swap;
	src:url("../fonts/campton-medium.woff2") format("woff2"); }
@font-face { font-family:"Hertz"; font-style:normal; font-weight:300; font-display:swap;
	src:url("../fonts/hertz-light.woff2") format("woff2"); }
/* "Book" is this family's medium weight — the brand book calls it Medium, but
   FF Hertz Pro ships no face by that name. Book is the one it shows. */
@font-face { font-family:"Hertz"; font-style:normal; font-weight:500; font-display:swap;
	src:url("../fonts/hertz-book.woff2") format("woff2"); }
@font-face { font-family:"Hertz"; font-style:italic; font-weight:400; font-display:swap;
	src:url("../fonts/hertz-italic.woff2") format("woff2"); }

/* ── Tokens ──────────────────────────────────────────────────────────────── */
body.theme--kb {
	/* Sampled from the brand book's own artwork (kavos-broliai-brand-book.ai,
	   applied example page). See the note in the build doc: these differ from
	   both the live Nuxt site and the hexes quoted from memory. */
	--kb-ink: #0c203e;      /* dark ground */
	--kb-ink-2: #16305c;
	--kb-logo-ink: #101228; /* the wordmark is drawn a shade blacker than the ground */
	--kb-paper: #f8f8ef;    /* cream */
	--kb-brass: #af8644;    /* the headline voice on dark */
	--kb-brass-rgb: 175, 134, 68;
	--kb-grey: #7f828b;
	--kb-grey-dark: #43485a;
	/* Channel triplets so alpha variants can never drift from the hexes above. */
	--kb-ink-rgb: 12, 32, 62;
	--kb-paper-rgb: 248, 248, 239;
	--kb-line: rgba(var(--kb-ink-rgb), 0.14);
	--kb-line-inv: rgba(var(--kb-paper-rgb), 0.18);

	--kb-sans: "Campton", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--kb-serif: "Hertz", Georgia, "Times New Roman", serif;

	--kb-wrap: 1140px;
	--kb-gap: clamp(28px, 5vw, 56px);
	--kb-sec-y: clamp(64px, 9vw, 128px);
	--kb-page-top: clamp(52px, 6.5vw, 96px); /* inner pages: header → title (1.12.5) */
	/* One number for the header's height: the header sets it, and the hero
	   subtracts it to fill exactly the rest of the screen. Changing it in one
	   place keeps the two from drifting apart. */
	--kb-header-h: 78px;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
body.theme--kb {
	margin: 0;
	background: var(--kb-paper);
	color: var(--kb-ink);
	font-family: var(--kb-sans);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.theme--kb *,
.theme--kb *::before,
.theme--kb *::after { box-sizing: border-box; }

.theme--kb img { max-width: 100%; height: auto; display: block; }

.theme--kb a { color: inherit; text-decoration: none; }

.theme--kb :focus-visible {
	outline: 2px solid var(--kb-brass);
	outline-offset: 3px;
}

.kb-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--kb-ink);
	color: var(--kb-paper);
	padding: 12px 18px;
	z-index: 100;
}
.kb-skip:focus { left: 8px; top: 8px; }

.kb-wrap {
	width: 100%;
	max-width: var(--kb-wrap);
	margin: 0 auto;
	padding-inline: clamp(20px, 5vw, 40px);
}

/* ── Type scale ──────────────────────────────────────────────────────────────
   Every heading is uppercase, per the brand book. Caps read roughly 15% larger
   than the same point size in mixed case, so the sizes come DOWN as the
   tracking goes up — a headline set in caps at the old size would shout.

   `text-wrap: balance` is what stops a heading dropping its last two words
   onto a line of their own ("— skonio."). The browser evens the line lengths
   instead of filling greedily. Supported everywhere current; older browsers
   simply wrap as before, so it is a pure improvement.                        */
.kb-h1,
.kb-h2,
.kb-h3 {
	font-family: var(--kb-serif);
	font-weight: 500;
	text-transform: uppercase;
	text-wrap: balance;
	margin: 0;
}
/* Brand rule, from the applied example in the brand book: on a dark ground the
   headline is gold, not cream. Small info type stays cream. */
.kb-sec--ink .kb-h2,
.kb-sec--ink .kb-h3 { color: var(--kb-brass); }
.kb-h1 { font-size: clamp(1.7rem, 3.9vw, 2.6rem); line-height: 1.22; letter-spacing: 0.075em; }
.kb-h2 { font-size: clamp(1.35rem, 2.9vw, 2.05rem); line-height: 1.26; letter-spacing: 0.085em; }
.kb-h3 { font-size: clamp(1.05rem, 1.9vw, 1.35rem); line-height: 1.3; letter-spacing: 0.09em; }

/* The em dash is a joint, not a break point — it should never start a line. */
.kb-h1, .kb-h2, .kb-h3, .kb-hero__title { word-break: normal; overflow-wrap: normal; }

/* ── Eyebrow ─────────────────────────────────────────────────────────────────
   A short brass rule leads into the label. It is the cheapest bit of character
   on the page: it turns a grey caption into a masthead, and it repeats the one
   accent colour the brand allows.                                            */
.kb-eyebrow {
	margin: 0 0 18px;
	font-family: var(--kb-sans);
	font-weight: 400;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kb-brass);
	display: flex;
	align-items: center;
	gap: 14px;
}
.kb-eyebrow::before {
	content: "";
	flex: none;
	width: 30px;
	height: 1px;
	background: currentColor;
	opacity: .85;
}
/* Centred sections get the rule on both sides, so the label stays symmetrical. */
.kb-esp .kb-eyebrow,
.kb-hero .kb-eyebrow { justify-content: center; }
.kb-esp .kb-eyebrow::after,
.kb-hero .kb-eyebrow::after {
	content: "";
	flex: none;
	width: 30px;
	height: 1px;
	background: currentColor;
	opacity: .85;
}
.kb-sec--ink .kb-eyebrow,
.kb-hero .kb-eyebrow { color: rgba(var(--kb-paper-rgb), 0.62); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.kb-btn {
	display: inline-block;
	padding: 15px 30px;
	border: 1px solid var(--kb-ink);
	background: transparent;
	color: var(--kb-ink);
	font-family: var(--kb-sans);
	font-weight: 400;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
/* Gold on hover, the same move the social icons make. Filled rather than
   outlined: gold text on either ground is thin contrast, gold ground with ink
   type is not. */
.kb-btn:hover,
.kb-btn--light:hover {
	background: var(--kb-brass);
	border-color: var(--kb-brass);
	color: var(--kb-ink);
}
.kb-btn--light {
	border-color: var(--kb-paper);
	color: var(--kb-paper);
}
.kb-btn--sm { padding: 11px 20px; font-size: 0.72rem; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.kb-header {
	position: relative;
	z-index: 20;
	background: var(--kb-ink);
	color: var(--kb-paper);
}
.kb-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--kb-header-h);
}
.kb-logo {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.kb-logo__icon {
	/* 62px, not the 52px it was beside the wordmark. Alone on the left of a
	   78px bar it has to hold that side by itself, and at 52 it read as a
	   sticker someone had left there. The ring's own type stays legible: the
	   badge is 62 tall against nav links of 0.78rem. */
	width: 62px;
	color: var(--kb-paper);
	flex: none;
	display: block;
}
.kb-logo__icon svg { width: 100%; height: auto; display: block; }

/* No `.kb-logo__mark` here any more: the header prints the badge alone, so the
   wordmark rules and the `.home`-only hiding they needed are gone with them.
   See the comment in header.php for why. The wordmark still has its own
   styling under `.kb-hero__logo` and `.kb-footer__mark`. */

.kb-nav {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.4vw, 30px);
}
/* A brass rule that draws itself in from the left on hover. Padding is on the
   link, not the row, so the touch target is 44px tall on a phone — the text
   alone was 20px, which is half what a thumb needs. */
.kb-nav__link {
	position: relative;
	padding: 12px 2px;
	font-size: 0.76rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 400;
	color: rgba(var(--kb-paper-rgb), 0.78);
	transition: color .2s ease;
}
.kb-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 6px;
	height: 1px;
	background: var(--kb-brass);
	transition: right .28s cubic-bezier(.4, 0, .2, 1);
}
.kb-nav__link:hover { color: var(--kb-paper); }
.kb-nav__link:hover::after { right: 0; }
/* Resting state only. The hover is deliberately NOT overridden here — this
   rule used to set a cream fill, and being later in the file it beat
   .kb-btn:hover, so the one button in the header stayed white while every
   other button went gold. */
.kb-nav__cta { border-color: rgba(var(--kb-paper-rgb), 0.5); color: var(--kb-paper); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* No longer full-screen. A hero that fills the viewport was right when the
   copy was long; with three lines of text it just pushed the site below the
   fold and left a lake of navy. It is now sized to its content with a ceiling,
   so the section below is always visible and the page starts moving straight
   away. Padding still scales with viewport HEIGHT, not width — a short window
   is exactly where a width-scaled hero overflows. */
.kb-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 60svh, 620px);
	background: var(--kb-ink);
	color: var(--kb-paper);
	padding-block: clamp(44px, 7vh, 86px);
	overflow: hidden;
}
/* An inset hairline — the oldest trick in luxury print, and the one thing that
   turns "photo with centred text on it" into something that looks composed.
   Sits inside the section, not on it, so it never touches the viewport edge. */
.kb-hero::after {
	content: "";
	position: absolute;
	inset: clamp(14px, 1.6vw, 26px);
	border: 1px solid rgba(var(--kb-paper-rgb), 0.16);
	pointer-events: none;
	z-index: 1;
}
.kb-hero__media {
	position: absolute;
	inset: 0;
}
.kb-hero__media picture {
	display: block;
	width: 100%;
	height: 100%;
}
.kb-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.34;
}
.kb-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(var(--kb-ink-rgb), 0.72) 0%, rgba(var(--kb-ink-rgb), 0.88) 100%);
}
.kb-hero__inner {
	position: relative;
	z-index: 2;
	/* Wider than the old 780px so the headline can hold one line at a size
	   that still looks like a headline. */
	max-width: 1040px;
	margin-inline: auto;
	text-align: center;
}
.kb-hero__logo {
	display: block;
	margin: 0 auto clamp(18px, 3vh, 32px);
	width: clamp(190px, 27vw, 310px);
	height: auto;
	color: var(--kb-paper);
}
.kb-hero__logo svg { width: 100%; height: auto; display: block; }
/* Fallback mark, used until a real logo is set in Customise → Logotipas. */
.kb-hero__mark {
	width: clamp(52px, 7vw, 72px);
	margin: 0 auto clamp(24px, 3.5vw, 38px);
	color: var(--kb-brass);
}
.kb-hero__mark svg { width: 100%; height: auto; display: block; }

.kb-hero__title {
	font-family: var(--kb-serif);
	font-weight: 300;
	/* Caps read ~15% larger at the same point size, so the ceiling comes down. */
	font-weight: 500;
	color: var(--kb-brass);
	/* Tuned so "NUOSTABI KAVA NĖRA ATSITIKTINUMAS." holds one line from about
	   760px up, inside the 1040px measure. No `white-space: nowrap` on purpose:
	   a longer headline typed into the Customizer should wrap, not overflow. */
	font-size: clamp(1.2rem, 2.85vw, 2.15rem);
	line-height: 1.24;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	text-wrap: balance;
	margin: 0 0 18px;
}
.kb-hero__text {
	margin: 0 auto clamp(20px, 3vh, 30px);
	max-width: 54ch;
	color: rgba(var(--kb-paper-rgb), 0.8);
	font-size: 0.98rem;
	line-height: 1.72;
	text-wrap: balance;
}

/* ── Section shell ───────────────────────────────────────────────────────── */
.kb-sec { padding-block: var(--kb-sec-y); }
.kb-sec--ink {
	background: var(--kb-ink);
	color: var(--kb-paper);
}

.kb-sec__head {
	max-width: 42rem;
	margin-bottom: clamp(40px, 6vw, 72px);
}
.kb-sec__intro {
	margin: 18px 0 0;
	color: rgba(var(--kb-paper-rgb), 0.74);
	font-size: 1.02rem;
}
.kb-sec:not(.kb-sec--ink) .kb-sec__intro { color: var(--kb-grey-dark); }

/* ── Story ───────────────────────────────────────────────────────────────── */
.kb-story__inner {
	display: grid;
	gap: var(--kb-gap);
	grid-template-columns: 1fr;
}
.kb-story__body p {
	margin: 0 0 20px;
	max-width: 62ch;
	color: var(--kb-grey-dark);
}
.kb-story__body p:last-child { margin-bottom: 0; }

@media (min-width: 860px) {
	.kb-story__inner { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
}

/* ── Blocks inside services ──────────────────────────────────────────────── */
.kb-block { margin-top: clamp(48px, 7vw, 88px); }
.kb-block:first-child { margin-top: 0; }
.kb-block--flush { margin-top: 0; }
.kb-block__head { margin-bottom: clamp(24px, 3.5vw, 40px); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
/* Separate framed boxes, not a hairline grid. The old version shared borders
   between neighbours, which is what made it read as a table rather than a set
   of things. Each card now stands on its own, with a brass rule above the
   title doing the work a heavier border would have done crudely. */
.kb-cards {
	display: grid;
	gap: clamp(14px, 1.4vw, 20px);
	grid-template-columns: 1fr;
}
.kb-card {
	position: relative;
	padding: clamp(26px, 2.9vw, 38px);
	border: 1px solid var(--kb-line-inv);
	transition: border-color .25s ease, background-color .25s ease;
}
.kb-sec:not(.kb-sec--ink) .kb-card { border-color: var(--kb-line); }
.kb-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 46px;
	height: 2px;
	background: var(--kb-brass);
	transition: width .3s ease;
}
.kb-card:hover { border-color: rgba(var(--kb-brass-rgb), 0.55); }
.kb-card:hover::before { width: 82px; }
.kb-card__title {
	margin: 0 0 10px;
	font-family: var(--kb-sans);
	font-weight: 500;
	font-size: 0.94rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.kb-card__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.72;
	color: rgba(var(--kb-paper-rgb), 0.7);
}
.kb-sec:not(.kb-sec--ink) .kb-card__text { color: var(--kb-grey-dark); }

/* Four across is tight once each card carries its own frame and padding, so
   the 4-up row gets a shorter measure. Leftover class from the old markup. */
.kb-cards--4 .kb-card { padding: clamp(22px, 2.1vw, 28px); }
.kb-card--plain { /* no separate treatment; kept so old markup styles cleanly */ }

@media (min-width: 700px) {
	.kb-cards--3 { grid-template-columns: repeat(3, 1fr); }
	.kb-cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.kb-cards--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Split: list + steps ─────────────────────────────────────────────────── */
.kb-split {
	display: grid;
	gap: clamp(48px, 7vw, 80px);
	grid-template-columns: 1fr;
	margin-top: clamp(48px, 7vw, 88px);
}
@media (min-width: 900px) {
	.kb-split { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 90px); }
}

.kb-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.kb-list li {
	position: relative;
	padding: 16px 0 16px 26px;
	border-top: 1px solid var(--kb-line-inv);
	font-size: 0.97rem;
	color: rgba(var(--kb-paper-rgb), 0.78);
}
.kb-list li:last-child { border-bottom: 1px solid var(--kb-line-inv); }
.kb-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 27px;
	width: 10px;
	height: 1px;
	background: var(--kb-brass);
}

.kb-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}
.kb-step {
	display: flex;
	gap: 20px;
	padding: 20px 0;
	border-top: 1px solid var(--kb-line-inv);
}
.kb-step:last-child { border-bottom: 1px solid var(--kb-line-inv); }
.kb-step__n {
	flex: none;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 1px solid var(--kb-brass);
	color: var(--kb-brass);
	font-size: 0.8rem;
	font-weight: 400;
}
.kb-step__title {
	margin: 4px 0 6px;
	font-family: var(--kb-sans);
	font-weight: 400;
	font-size: 1rem;
}
.kb-step__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(var(--kb-paper-rgb), 0.7);
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
/* Boxed, like the cards, so the whole page speaks one language instead of
   alternating between boxes and ruled rows. */
.kb-faq { display: grid; gap: clamp(10px, 1vw, 14px); }
.kb-faq__item {
	border: 1px solid var(--kb-line-inv);
	transition: border-color .25s ease;
}
.kb-faq__item[open],
.kb-faq__item:hover { border-color: rgba(var(--kb-brass-rgb), 0.5); }
.kb-faq__q {
	list-style: none;
	cursor: pointer;
	padding: 20px clamp(46px, 5vw, 58px) 20px clamp(20px, 2.2vw, 28px);
	position: relative;
	font-size: 0.98rem;
	font-weight: 400;
}
.kb-faq__q::-webkit-details-marker { display: none; }
.kb-faq__q::after {
	content: "";
	position: absolute;
	right: clamp(22px, 2.4vw, 28px);
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -6px;
	border-right: 1px solid var(--kb-brass);
	border-bottom: 1px solid var(--kb-brass);
	transform: rotate(45deg);
	transition: transform .22s ease;
}
.kb-faq__item[open] .kb-faq__q::after { transform: rotate(-135deg); margin-top: -2px; }
.kb-faq__a p {
	margin: 0;
	padding: 0 clamp(46px, 5vw, 58px) 22px clamp(20px, 2.2vw, 28px);
	max-width: 66ch;
	font-size: 0.96rem;
	color: rgba(var(--kb-paper-rgb), 0.7);
}

/* ── Espresinė ───────────────────────────────────────────────────────────── */
.kb-esp__inner {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
}
.kb-esp__text {
	margin: 18px auto 32px;
	max-width: 48ch;
	color: var(--kb-grey-dark);
}

/* ── Contact ─────────────────────────────────────────────────────────────── */
.kb-contact__inner {
	display: grid;
	gap: clamp(40px, 6vw, 80px);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 900px) {
	.kb-contact__inner { grid-template-columns: 0.9fr 1.1fr; }
}
.kb-contact__text {
	margin: 18px 0 28px;
	max-width: 46ch;
	color: rgba(var(--kb-paper-rgb), 0.74);
}
.kb-contact__direct {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: var(--kb-serif);
	font-size: clamp(1.1rem, 2.4vw, 1.45rem);
}
.kb-contact__direct a {
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
	width: fit-content;
}
.kb-contact__direct a:hover { border-bottom-color: var(--kb-brass); }
.kb-contact__note {
	margin: 26px 0 0;
	font-size: 0.87rem;
	color: rgba(var(--kb-paper-rgb), 0.55);
}

/* ── Form ────────────────────────────────────────────────────────────────── */
.kb-field-row {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}
@media (min-width: 560px) {
	.kb-field-row { grid-template-columns: 1fr 1fr; }
}
.kb-field { margin-bottom: 18px; }
.kb-field-row .kb-field { margin-bottom: 0; }
.kb-field label {
	display: block;
	margin-bottom: 7px;
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(var(--kb-paper-rgb), 0.62);
}
.kb-field input,
.kb-field textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--kb-line-inv);
	background: rgba(var(--kb-paper-rgb), 0.05);
	color: var(--kb-paper);
	font-family: var(--kb-sans);
	font-weight: 300;
	font-size: 1rem;
	border-radius: 0;
	transition: border-color .2s ease, background-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.kb-field input:focus,
.kb-field textarea:focus {
	outline: none;
	border-color: var(--kb-brass);
	background: rgba(var(--kb-paper-rgb), 0.09);
}
.kb-field textarea { resize: vertical; min-height: 130px; }
.kb-field__error {
	margin: 6px 0 0;
	font-size: 0.82rem;
	color: #e8a06a;
	min-height: 0;
}
.kb-field__error:empty { display: none; }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.kb-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none;
}

.kb-turnstile { margin: 4px 0 20px; }

/* Let the form title breathe — it was sitting on top of the first field. */
.kb-contact__form-wrap .kb-h3 { margin-bottom: clamp(22px, 3vw, 34px); }

#kb-contact-form .kb-btn { margin-top: 8px; }

.kb-form__result {
	margin-top: 22px;
	padding: 16px 18px;
	border: 1px solid var(--kb-brass);
	font-size: 0.95rem;
	color: var(--kb-paper);
}
.kb-form__result.is-error { border-color: #e8a06a; color: #e8a06a; }

/* ── Business-client application [kb_b2b_paraiska] (1.10.0) ───────────────
   The contact form's fields, turned for the paper page: ink text, ink lines.
   Same field grid (.kb-field-row) and error line (.kb-field__error). */
/* The page: an info panel and the form, side by side from 900px (1.10.2).
   page.php widens any page holding [kb_b2b_paraiska]. */
.kb-b2b {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}
@media (min-width: 900px) {
	.kb-b2b.has-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.kb-b2b__intro { position: sticky; top: calc(var(--kb-header-h) + 24px); }
}
.kb-b2b__main { min-width: 0; max-width: 680px; }
.kb-b2b__intro {
	background: var(--kb-ink);
	color: var(--kb-paper);
	padding: clamp(22px, 3vw, 32px);
	font-size: 0.92rem;
	line-height: 1.5;
}
.kb-b2b__intro::before { /* the brand's brass mark — a fill, never text */
	content: "";
	display: block;
	width: 44px;
	height: 4px;
	margin-bottom: 18px;
	background: var(--kb-brass);
}
.kb-prose .kb-b2b__lead,
.kb-b2b__lead {
	margin: 0 0 20px;
	font-family: var(--kb-serif);
	font-size: clamp(1.02rem, 1.6vw, 1.15rem);
	line-height: 1.4;
	color: var(--kb-paper);
}
.kb-b2b__rows { margin: 0; border-top: 1px solid var(--kb-line-inv); }
.kb-b2b__row {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 4px 14px;
	padding: 11px 0;
	border-bottom: 1px solid var(--kb-line-inv);
}
.kb-b2b__row dt {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(var(--kb-paper-rgb), 0.62);
	padding-top: 3px;
}
.kb-b2b__row dd { margin: 0; color: rgba(var(--kb-paper-rgb), 0.92); }
@media (max-width: 899px) {
	.kb-b2b__intro { max-width: 680px; } /* one column: as wide as the form */
}
@media (max-width: 600px) { /* a phone: the panel stays a panel, not a page */
	.kb-b2b__intro { padding: 20px 18px; font-size: 0.86rem; }
	.kb-b2b__intro::before { margin-bottom: 14px; }
	.kb-prose .kb-b2b__lead,
	.kb-b2b__lead { font-size: 0.98rem; margin-bottom: 14px; }
	.kb-b2b__row { display: block; padding: 8px 0; } /* label runs in before its line */
	.kb-b2b__row dt { display: inline; font-size: 0.62rem; padding: 0 8px 0 0; }
	.kb-b2b__row dd { display: inline; }
	.kb-b2b__how { margin-top: 16px; }
	.kb-prose .kb-b2b__steps li,
	.kb-b2b__steps li { padding-left: 30px; margin-bottom: 7px; min-height: 20px; }
	.kb-b2b__steps li::before { width: 20px; height: 20px; font-size: 0.7rem; }
}
.kb-b2b__how { margin-top: 22px; }
.kb-prose .kb-b2b__how-title,
.kb-b2b__how-title {
	margin: 0 0 12px;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(var(--kb-paper-rgb), 0.62);
}
.kb-prose .kb-b2b__steps,
.kb-b2b__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: kb-step;
}
.kb-prose .kb-b2b__steps li,
.kb-b2b__steps li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 36px;
	min-height: 24px;
	counter-increment: kb-step;
	color: rgba(var(--kb-paper-rgb), 0.92);
}
.kb-b2b__steps li:last-child { margin-bottom: 0; }
.kb-b2b__steps li::before {
	content: counter(kb-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	background: var(--kb-brass);
	color: var(--kb-ink);
	font-size: 0.78rem;
	font-weight: 500;
}
.kb-b2b__main > .kb-b2b-note { margin-top: 0; }
.kb-b2b-form .kb-field-row { margin-bottom: 18px; } /* .kb-field-row .kb-field drops its own margin */
.kb-b2b-form .kb-field label { color: var(--kb-grey-dark); }
.kb-b2b-form .kb-field input,
.kb-b2b-form .kb-field select,
.kb-b2b-form .kb-field textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid rgba(var(--kb-ink-rgb), 0.28);
	background: #fff;
	color: var(--kb-ink);
	font-family: var(--kb-sans);
	font-weight: 300;
	font-size: 1rem;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}
.kb-b2b-form .kb-field select {
	padding-right: 40px;
	background-image: linear-gradient(45deg, transparent 50%, var(--kb-ink) 50%), linear-gradient(135deg, var(--kb-ink) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
}
.kb-b2b-form .kb-field input:focus,
.kb-b2b-form .kb-field select:focus,
.kb-b2b-form .kb-field textarea:focus {
	outline: 2px solid var(--kb-brass);
	outline-offset: 0;
	border-color: var(--kb-ink);
	background-color: #fff;
}
.kb-b2b-form .kb-field input[readonly] { background: rgba(var(--kb-ink-rgb), 0.04); color: var(--kb-grey-dark); }
.kb-b2b-form .kb-field [aria-invalid="true"] { border-color: #b4532a; }
.kb-b2b-form .kb-field__error { color: #b4532a; }
.kb-b2b-form .kb-field textarea { min-height: 110px; }
.kb-b2b-form__notice {
	margin: 0 0 22px;
	padding: 14px 16px;
	border: 1px solid #b4532a;
	color: #b4532a;
	font-size: 0.95rem;
}
.kb-b2b-form__legal { margin: 4px 0 20px; font-size: 0.84rem; color: var(--kb-grey); max-width: 60ch; }
/* /verslui/ — tighter, not cramped (1.12.3 → 1.12.5). Arnas: make the page
   "tighter and nicer"; fitting one screen is welcome, not required, and never
   by hiding things or squeezing the title — the page head keeps the shared
   inner-page spacing (--kb-page-top). What gets smaller is the form itself.
   From 900px the info panel is a little tighter. From 1100px (where the
   longest label still fits a column) the form is a two-column grid —
   .kb-field-row steps aside (display: contents), so the fields pair up in
   their own order: Įmonė | kodas, PVM | adresas, asmuo | telefonas,
   el. paštas | veikla, kiekis | pastaba — with smaller labels and inputs;
   the note starts one line high and grows as it is typed into; the privacy
   line runs full width, then Turnstile and the button share the last row.
   Below 1100px (tablets, phones) the stacked form above is kept as it was. */
@media (min-width: 900px) {
	.kb-page--b2b .kb-b2b.has-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 3.5vw, 48px); }
	.kb-page--b2b .kb-b2b__main { max-width: none; }
	.kb-page--b2b .kb-b2b__intro { padding: 24px 26px; font-size: 0.86rem; line-height: 1.45; }
	.kb-page--b2b .kb-b2b__intro::before { margin-bottom: 16px; }
	.kb-page--b2b .kb-b2b__lead { font-size: 1.04rem; margin-bottom: 16px; }
	.kb-page--b2b .kb-b2b__row { grid-template-columns: 6.5rem 1fr; padding: 9px 0; }
	.kb-page--b2b .kb-b2b__how { margin-top: 18px; }
	.kb-page--b2b .kb-b2b__how-title { margin-bottom: 10px; }
	.kb-page--b2b .kb-b2b__steps li { margin-bottom: 7px; padding-left: 32px; min-height: 22px; }
	.kb-page--b2b .kb-b2b__steps li::before { width: 22px; height: 22px; }
	.kb-page--b2b .kb-b2b__login { margin-top: 16px; padding-top: 14px; }
}
@media (min-width: 1100px) {
	.kb-page--b2b .kb-b2b-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; align-items: start; }
	.kb-page--b2b .kb-b2b-form .kb-field-row { display: contents; }
	.kb-page--b2b .kb-b2b-form .kb-field { margin: 0; }
	.kb-page--b2b .kb-b2b-form .kb-field label { margin-bottom: 6px; font-size: 0.68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.kb-page--b2b .kb-b2b-form .kb-field input,
	.kb-page--b2b .kb-b2b-form .kb-field select,
	.kb-page--b2b .kb-b2b-form .kb-field textarea { padding: 9px 12px; font-size: 0.95rem; }
	.kb-page--b2b .kb-b2b-form .kb-field input,
	.kb-page--b2b .kb-b2b-form .kb-field select { height: 42px; } /* the select drew 4px shorter than the inputs beside it */
	.kb-page--b2b .kb-b2b-form .kb-field select { padding-right: 36px; }
	.kb-page--b2b .kb-b2b-form .kb-field textarea { min-height: 0; height: auto; field-sizing: content; max-height: 160px; }
	.kb-page--b2b .kb-b2b-form__notice,
	.kb-page--b2b .kb-b2b-form__legal { grid-column: 1 / -1; }
	.kb-page--b2b .kb-b2b-form__notice { margin: 0; }
	.kb-page--b2b .kb-b2b-form__legal { margin: 6px 0 0; max-width: none; font-size: 0.82rem; }
	.kb-page--b2b .kb-b2b-form .kb-turnstile { grid-column: 1; margin: 0; }
	.kb-page--b2b .kb-b2b-form .kb-btn { grid-column: 2; justify-self: end; align-self: center; }
}
.kb-b2b-note {
	margin: clamp(24px, 3vw, 36px) 0 0;
	padding: 18px 20px;
	background: rgba(var(--kb-brass-rgb), 0.14);
	color: var(--kb-ink);
}

/* ── Inner pages (legal) ─────────────────────────────────────────────────── */
.kb-page__inner { max-width: 780px; }
.kb-page__head { margin-bottom: clamp(28px, 4vw, 48px); }
/* Inner pages and the shop open closer to the header (1.12.5, Arnas: "a lot of
   space on top, even too much"): the section's full --kb-sec-y suits the front
   page's stacked sections, not a page that starts with its title. Bottom
   padding stays --kb-sec-y. */
.kb-sec.kb-page,
.kb-sec.kb-shop,
.kb-sec.kb-product-sec { padding-top: calc(var(--kb-page-top) * 0.65); } /* 1.15.2: the product sits closer to the header */
.kb-prose { color: var(--kb-grey-dark); }
/* Uppercase, like every other heading on the site. Sizes come down as the
   tracking goes up — the same trade the main type scale makes. */
.kb-prose h2,
.kb-prose h3 {
	font-family: var(--kb-serif);
	font-weight: 500;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--kb-ink);
	margin: 2em 0 0.6em;
	line-height: 1.3;
}
.kb-prose h2 { font-size: 1.3rem; letter-spacing: 0.085em; }
.kb-prose h3 { font-size: 1.02rem; letter-spacing: 0.09em; }
.kb-prose p, .kb-prose li { margin: 0 0 1em; }
.kb-prose ul, .kb-prose ol { padding-left: 1.2em; }
.kb-prose a { color: var(--kb-ink); border-bottom: 1px solid var(--kb-brass); }

/* ── Wide pages (page.php) ───────────────────────────────────────────────────
   The block cart and checkout, and any page on the "Platus puslapis"
   template (the coffee archive): the full content width, not the reading
   column. The title stays in the column's rhythm. */
.kb-page--wide .kb-page__inner { max-width: var(--kb-wrap); }
/* Prose on a wide page still reads at prose width. */
.kb-page--wide .kb-prose > p { max-width: 46rem; }

/* ── Kavos archyvas (inc/kb-archive.php) ─────────────────────────────────────
   Table blocks with the class `kb-archive`. Hairlines between rows, none
   between columns; the number in grey figures, the coffee's name in ink.
   core/table's own CSS draws a 1px box round every cell and a 3px rule
   under the head at (0,1,1) — matched and reset at (0,3,1) and above. */
.kb-prose .wp-block-table.kb-archive { margin: 0 0 clamp(36px, 5vw, 64px); overflow-x: visible; }
/* table-layout: the editor saves every table as .has-fixed-layout, which
   gives "#2634" the same width as a list of five varieties. */
.kb-prose .wp-block-table.kb-archive table { width: 100%; table-layout: auto; border-collapse: collapse; font-size: 0.9rem; }
.kb-prose .wp-block-table.kb-archive thead { border-bottom: 1px solid rgba(var(--kb-ink-rgb), 0.34); }
.kb-prose .wp-block-table.kb-archive th,
.kb-prose .wp-block-table.kb-archive td {
	border: 0;
	padding: 12px 16px 12px 0;
	text-align: left;
	vertical-align: top;
	/* .has-fixed-layout sets word-break: break-word, which split "Gvatemala"
	   mid-word once the column went narrow. Break between words only. */
	word-break: normal;
	overflow-wrap: normal;
}
.kb-prose .wp-block-table.kb-archive th {
	font-family: var(--kb-sans);
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kb-grey-dark);
	white-space: nowrap;
}
.kb-prose .wp-block-table.kb-archive tbody tr { border-bottom: 1px solid var(--kb-line); }
.kb-prose .wp-block-table.kb-archive tbody td:first-child { color: var(--kb-grey-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kb-prose .wp-block-table.kb-archive tbody td:nth-child(2) { color: var(--kb-ink); font-weight: 500; white-space: nowrap; }
.kb-prose .wp-block-table.kb-archive figcaption { margin-top: 12px; font-size: 0.82rem; color: var(--kb-grey-dark); }

/* A row opened from a product page (/kavos-archyvas/#kava-2634): a brass
   rule down its left edge (a border, not a shadow) and a faint brass wash,
   scrolled clear of the sticky header. */
.kb-prose .wp-block-table.kb-archive tr[id] { scroll-margin-top: calc(var(--kb-header-h) + 24px); }
.kb-prose .wp-block-table.kb-archive tr:target { background: rgba(var(--kb-brass-rgb), 0.14); }
.kb-prose .wp-block-table.kb-archive tr:target td:first-child { border-left: 3px solid var(--kb-brass); padding-left: 9px; }

/* "Parduotuvėje" — a coffee you can buy today. Navy type, brass rule: brass
   text on cream fails contrast. */
.kb-prose .wp-block-table.kb-archive a.kb-archive__shop {
	display: inline-block;
	margin-left: 8px;
	font-family: var(--kb-sans);
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kb-ink);
	border-bottom: 1px solid var(--kb-brass);
	white-space: nowrap;
}

/* Phones: each row becomes a small card — number, name, then "Label value"
   lines from the column headings (data-label, added by inc/kb-archive.php).
   A seven-column table scrolled sideways is unreadable at 390px. */
@media (max-width: 782px) {
	.kb-prose .wp-block-table.kb-archive thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
	.kb-prose .wp-block-table.kb-archive table,
	.kb-prose .wp-block-table.kb-archive tbody { display: block; }
	.kb-prose .wp-block-table.kb-archive tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		padding: 14px 0;
	}
	.kb-prose .wp-block-table.kb-archive tbody td { display: block; padding: 2px 0; }
	.kb-prose .wp-block-table.kb-archive tbody td:first-child { font-size: 0.76rem; letter-spacing: 0.08em; }
	.kb-prose .wp-block-table.kb-archive tbody td:nth-child(2) { font-size: 1rem; padding-bottom: 6px; white-space: normal; }
	/* Label and value as two columns, so a long value (five farmers, four
	   varieties) wraps inside its own column instead of running back under
	   the label (Arnas, 1.7.4: "cuts not nicely"). */
	.kb-prose .wp-block-table.kb-archive tbody td:nth-child(n+3)[data-label] {
		display: grid;
		grid-template-columns: 7.5rem minmax(0, 1fr);
		column-gap: 12px;
		align-items: baseline;
	}
	.kb-prose .wp-block-table.kb-archive tbody td:nth-child(n+3)[data-label]::before {
		content: attr(data-label);
		font-size: 0.62rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--kb-grey-dark);
	}
	.kb-prose .wp-block-table.kb-archive tbody td:nth-child(n+3):empty { display: none; }
	.kb-prose .wp-block-table.kb-archive tr:target td:first-child { border-left: 0; padding-left: 0; }
	.kb-prose .wp-block-table.kb-archive tr:target { border-left: 3px solid var(--kb-brass); padding-left: 9px; }
}

/* ── Tables in prose (legal pages; inc/kb-tables.php) ────────────────────────
   Every other Table block: the archive's hairline look, plain. Matched against
   core/table's cell boxes at (0,3,1). On phones a table with a heading row
   becomes cards — first cell as the title, then "LABEL value" lines from
   data-label. A table without headings (key → value) stays a table. */
.kb-prose .wp-block-table:not(.kb-archive) { margin: 1.4em 0 2em; }
.kb-prose .wp-block-table:not(.kb-archive) table { width: 100%; table-layout: auto; border-collapse: collapse; font-size: 0.92rem; }
.kb-prose .wp-block-table:not(.kb-archive) thead { border-bottom: 1px solid rgba(var(--kb-ink-rgb), 0.34); }
.kb-prose .wp-block-table:not(.kb-archive) th,
.kb-prose .wp-block-table:not(.kb-archive) td {
	border: 0;
	padding: 10px 16px 10px 0;
	text-align: left;
	vertical-align: top;
	word-break: normal;
	overflow-wrap: break-word;
}
.kb-prose .wp-block-table:not(.kb-archive) th {
	font-family: var(--kb-sans);
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kb-grey-dark);
}
.kb-prose .wp-block-table:not(.kb-archive) tbody tr { border-bottom: 1px solid var(--kb-line); }
.kb-prose .wp-block-table:not(.kb-archive) tbody td:first-child { color: var(--kb-ink); font-weight: 500; }

/* The model withdrawal form (Pristatymas ir grąžinimas): a form to copy, so a
   ruled panel rather than a pull quote. */
.kb-prose .wp-block-quote {
	margin: 1.4em 0 2em;
	padding: 20px 24px;
	border: 1px solid var(--kb-line);
	border-left: 3px solid var(--kb-brass);
	font-style: normal;
}
.kb-prose .wp-block-quote > :last-child { margin-bottom: 0; }

@media (max-width: 782px) {
	.kb-prose .wp-block-table:not(.kb-archive):has(thead) thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
	.kb-prose .wp-block-table:not(.kb-archive):has(thead) table,
	.kb-prose .wp-block-table:not(.kb-archive):has(thead) tbody { display: block; }
	.kb-prose .wp-block-table:not(.kb-archive):has(thead) tbody tr { display: block; padding: 12px 0; }
	.kb-prose .wp-block-table:not(.kb-archive):has(thead) tbody td { display: block; padding: 2px 0; }
	.kb-prose .wp-block-table:not(.kb-archive):has(thead) tbody td:first-child { padding-bottom: 6px; }
	.kb-prose .wp-block-table:not(.kb-archive):has(thead) tbody td:nth-child(n+2)[data-label] {
		display: grid;
		grid-template-columns: 6.5rem minmax(0, 1fr);
		column-gap: 12px;
		align-items: baseline;
	}
	.kb-prose .wp-block-table:not(.kb-archive):has(thead) tbody td:nth-child(n+2)[data-label]::before {
		content: attr(data-label);
		font-size: 0.62rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--kb-grey-dark);
	}
	.kb-prose .wp-block-quote { padding: 16px 18px; }
}

/* ── The #cmplz-document override surface ────────────────────────────────────
   The generated cookie policy arrives wrapped in `#cmplz-document`, and the
   plugin styles its insides with ID selectors (1,0,1). Every one of those
   beats a theme class rule (0,2,0) no matter what order the files load in, so
   anything the theme wants to say about that subtree has to be said at the
   same weight. Two separate bugs came out of this — links underlined on top
   of our brass border, and headings held at `text-transform: initial` while
   every other heading on the site went uppercase — so the answer is one block
   that covers the whole surface rather than another patch per property.       */
.kb-prose #cmplz-document a,
#cmplz-document a { text-decoration: none; }

.kb-prose #cmplz-document h2,
.kb-prose #cmplz-document h3 {
	font-family: var(--kb-serif);
	font-weight: 500;
	text-transform: uppercase;
	color: var(--kb-ink);
	padding-bottom: 0;
	margin: 2em 0 0.6em;
	line-height: 1.3;
}
.kb-prose #cmplz-document h2 { font-size: 1.3rem; letter-spacing: 0.085em; }
.kb-prose #cmplz-document h3 { font-size: 1.02rem; letter-spacing: 0.09em; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.kb-footer {
	background: var(--kb-ink);
	color: var(--kb-paper);
	padding-block: clamp(48px, 7vw, 80px) 34px;
}
/* The footer sits on the same navy as the contact section above it, so without
   a rule the two read as one undifferentiated slab. A hairline is enough. */
.kb-footer { border-top: 1px solid var(--kb-line-inv); }

.kb-footer__cols {
	display: grid;
	/* Three content columns plus a fourth that is only as wide as the mark. */
	grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) auto;
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
	padding-bottom: 34px;
	border-bottom: 1px solid var(--kb-line-inv);
}
/* Nudged down by the height of a column title, so the mark lines up with the
   rows of social icons rather than floating level with the labels. */
.kb-footer__col--mark { justify-self: end; padding-top: 36px; }
.kb-footer__mark {
	display: block;
	width: 76px;
	color: rgba(var(--kb-paper-rgb), 0.9);
}
.kb-footer__mark svg { width: 100%; height: auto; display: block; }
.kb-footer__coltitle {
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--kb-line-inv);
	font-family: var(--kb-sans);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kb-brass);
}
.kb-footer__rekv {
	margin: 0;
	/* The Customizer holds one comma-separated line; the template turns the
	   commas into newlines and this renders them. */
	white-space: pre-line;
	font-size: 0.9rem;
	line-height: 1.85;
	/* Pull the first line's half-leading back so its text, not its line box,
	   starts level with the top of the social icons beside it. */
	margin-top: -0.42em;
	color: rgba(var(--kb-paper-rgb), 0.66);
}
.kb-footer__social { display: flex; gap: 14px; flex-wrap: wrap; }
.kb-social {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 1px solid var(--kb-line-inv);
	color: rgba(var(--kb-paper-rgb), 0.75);
	transition: color .2s ease, border-color .2s ease;
}
.kb-social svg { width: 19px; height: 19px; }
.kb-social:hover { color: var(--kb-brass); border-color: var(--kb-brass); }

.kb-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	align-items: center;
	justify-content: space-between;
	padding-top: 26px;
}
.kb-footer__links { display: flex; flex-wrap: wrap; gap: 22px; }
.kb-footer__links a {
	font-size: 0.85rem;
	color: rgba(var(--kb-paper-rgb), 0.6);
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.kb-footer__links a:hover { color: var(--kb-paper); border-bottom-color: var(--kb-brass); }
/* Complianz renders its "cookie settings" control as a <button>. Strip the
   chrome so it sits in the row as one more legal link. */
.kb-footer__links .cmplz-manage-consent,
.kb-footer__links button {
	appearance: none; background: none; border: 0; padding: 0; margin: 0;
	font: inherit; font-size: 0.85rem; cursor: pointer; text-align: left;
	color: rgba(var(--kb-paper-rgb), 0.6);
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.kb-footer__links button:hover { color: var(--kb-paper); border-bottom-color: var(--kb-brass); }
/* 1.11.5 — copyright / content-use line. Takes the full row so it never
   squeezes the legal links; the credit stays on the right below it. */
.kb-footer__copy {
	margin: 0;
	flex: 1 1 100%;
	order: 3;
	font-size: 0.8rem;
	color: rgba(var(--kb-paper-rgb), 0.45);
}
.kb-footer__credit { margin: 0; }
.kb-footer__credit a {
	font-size: 0.85rem;
	color: rgba(var(--kb-paper-rgb), 0.6);
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.kb-footer__credit a:hover { color: var(--kb-paper); border-bottom-color: var(--kb-brass); }

/* ── Small phones ────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
	body.theme--kb { --kb-sec-y: clamp(56px, 12vw, 80px); }
	/* The hero grew here after the intro copy was shortened: with two lines of
	   text instead of six the old padding left the panel looking under-filled
	   rather than composed. Still not full-screen — the story heading below
	   should be visible at the fold, because that is what makes someone
	   scroll. */
	.kb-hero { min-height: 0; padding-block: clamp(66px, 14vw, 96px); }
	.kb-hero__text { font-size: 0.95rem; line-height: 1.7; }

	/* Two centred rows: the badge gets the stage, the links sit under it as a
	   tight centred cluster. The old row was justified edge-to-edge, which put
	   APIE and KONTAKTAI in the corners and made three links look like a
	   toolbar. A hamburger would be heavier than the thing it hides. */
	.kb-header__inner { flex-direction: column; min-height: 0; padding-block: 14px 4px; gap: 2px; }
	.kb-logo { justify-content: center; }
	.kb-logo__icon { width: 58px; }
	/* 1.18.0: tighter (was clamp(20px, 7vw, 34px)) — the account icon joined the
	   cart at the row's end, and three links + two icons must fit 360 px. */
	.kb-nav { width: 100%; justify-content: center; gap: clamp(12px, 3.8vw, 34px); }
	.kb-nav__link { font-size: 0.72rem; letter-spacing: 0.12em; }
	.kb-nav__cta { display: none; }
	/* One column, and the mark moves out of the top-right corner — parked
	   beside REKVIZITAI it read as a stray sticker. It now closes the block,
	   centred, the way a maker's mark closes a page. */
	.kb-footer__cols { grid-template-columns: 1fr; gap: 34px; }
	.kb-footer__col--mark {
		justify-self: center;
		padding-top: 6px;
		border-top: 1px solid var(--kb-line-inv);
		width: 100%;
		display: flex;
		justify-content: center;
		padding-block: 30px 4px;
	}
	.kb-footer__mark { width: 64px; }

	/* Each legal link on its own line. Side by side they read as one broken
	   sentence at this width. */
	/* The four legal links read as one block, and the credit is not one of
	   them — it is a byline. Previously all five sat on the same rhythm with
	   22px of padding each, so "Sukūrė: Arnas Razgūnas" looked like a fifth
	   policy page. The links tighten up (10px padding, no gap — still a 39px
	   target) and the credit gets a hairline and real space above it. */
	.kb-footer__bottom { flex-direction: column; align-items: stretch; gap: 0; }
	.kb-footer__links { flex-direction: column; gap: 0; width: 100%; }
	/* `.cmplz-manage-consent` has to be named here, not just `button`. The base
	   rule above lists `.kb-footer__links .cmplz-manage-consent` (0,2,0)
	   alongside `.kb-footer__links button` (0,1,1), and an element matching
	   both takes the higher — so a bare `button` selector here loses to that
	   rule's `padding: 0` and the settings link sits 20px shorter than the
	   three anchors above it. Measured, not guessed: 24.8px against 44.8px. */
	/* `width: fit-content` is the whole point of these three lines. As plain
	   blocks the links filled the column, so the brass hover/tap underline ran
	   the full width of the screen — a rule under a two-word link. Shrinking
	   the box to its text keeps the underline the length of the words. The
	   padding is split 16/4 rather than 10/10 for the same reason: the border
	   draws at the bottom of the box, so an even split floated it 10px clear
	   of the text and it read as a divider. Same 44.8px touch target either
	   way. */
	.kb-footer__links a,
	.kb-footer__links .cmplz-manage-consent,
	.kb-footer__links button {
		display: block;
		width: fit-content;
		padding-block: 16px 4px;
	}
	.kb-footer__credit {
		margin-top: 18px;
		padding-top: 18px;
		border-top: 1px solid var(--kb-line-inv);
		width: 100%;
	}
	.kb-footer__credit a { display: inline-block; padding-block: 2px; }
}

/* Two columns before one: at tablet width three columns squeeze the details
   block into a ladder of single words. */
@media (max-width: 860px) and (min-width: 561px) {
	.kb-footer__cols { grid-template-columns: 1fr 1fr auto; }
	.kb-footer__col--legal { grid-column: 1 / -1; }
}

/* ── Landscape phones (~812–932 × 375–430) ───────────────────────────────────
   The sideways view escapes width-only breakpoints: a phone held sideways is
   "desktop-wide" but only ~400px tall, so any tall block eats the whole
   screen. Gate on HEIGHT, not width. */
@media (max-height: 460px) and (orientation: landscape) {
	body.theme--kb { --kb-sec-y: 48px; --kb-page-top: 40px; --kb-header-h: 58px; }
	/* The badge is 62px in the desktop rule and the bar is 58px tall here, so
	   it was being clipped top and bottom — the ring lost its crown. 44px
	   leaves 7px of air on each side and keeps the header the shortest thing
	   on a screen that only has 390px to give. */
	.kb-logo__icon { width: 44px; }
	/* Don't force a full-screen hero here — 400px of height is not enough for
	   logo + headline + paragraph + button, and min-height would only add
	   whitespace above a scroll. Let it be as tall as its content needs. */
	.kb-hero { min-height: 0; padding-block: 40px; }
	.kb-hero__title { font-size: clamp(1.15rem, 2.8vw, 1.5rem); letter-spacing: .09em; margin-bottom: 14px; }
	.kb-hero__logo { width: 190px; margin-bottom: 16px; }
	.kb-hero__mark { width: 44px; margin-bottom: 16px; }
	.kb-hero__text { font-size: 0.92rem; line-height: 1.6; margin-bottom: 20px; }
	.kb-field textarea { min-height: 90px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.theme--kb *,
	.theme--kb *::before,
	.theme--kb *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ── Consent banner (Complianz) ──────────────────────────────────────────────
   Complianz builds its banner entirely from CSS custom properties, but it
   declares them on `:root` in a stylesheet that loads AFTER this one. So they
   are redeclared here on `body.theme--kb` — specificity 0,1,1 against 0,0,1,
   which wins on merit rather than on order, and needs no !important. Custom
   properties inherit, so the banner picks them up wherever it sits in the DOM.

   The brief was "as minimal as possible": navy ground, cream text, one brass
   button, square corners, hairline border, no logo, no title, no shadow. It
   should read as the footer of the site rather than as a plugin. */
body.theme--kb {
	--cmplz_banner_width: 400px;
	--cmplz_banner_background_color: #0c203e;      /* --kb-ink   */
	/* Brass, not cream. A cream hairline at 18% is invisible against navy, and
	   the banner lands on navy more often than not: over the hero on a phone,
	   and — the case that matters — over the FOOTER, which is where the
	   "Slapukų nustatymai" link lives. Reopening the banner from that link
	   dropped a navy panel onto a navy footer with an edge nobody could see,
	   so it read as "the button is broken" when the button had worked all
	   along. Brass is the accent voice; this is the one place the banner has
	   to announce itself. */
	--cmplz_banner_border_color: rgba(175, 134, 68, 0.55);
	--cmplz_banner_border_width: 1px 1px 1px 1px;
	--cmplz_banner_border_radius: 0 0 0 0;
	--cmplz_banner_margin: 10px;

	--cmplz_text_color: rgba(248, 248, 239, 0.72);
	--cmplz_hyperlink_color: #af8644;              /* --kb-brass */
	--cmplz_text_font_size: 0.88rem;
	--cmplz_link_font_size: 0.72rem;
	--cmplz_title_font_size: 0.8rem;
	--cmplz_category_body_font_size: 0.75rem;
	--cmplz_category_header_title_font_size: 0.78rem;
	--cmplz_category_header_active_font_size: 0.68rem;
	--cmplz_category_header_always_active_color: rgba(248, 248, 239, 0.45);

	--cmplz_button_font_size: 0.68rem;
	--cmplz_button_border_radius: 0 0 0 0;
	--cmplz_button_accept_background_color: #af8644;
	--cmplz_button_accept_border_color: #af8644;
	--cmplz_button_accept_text_color: #0c203e;
	--cmplz_button_deny_background_color: transparent;
	--cmplz_button_deny_border_color: rgba(248, 248, 239, 0.35);
	--cmplz_button_deny_text_color: rgba(248, 248, 239, 0.72);
	--cmplz_button_settings_background_color: transparent;
	--cmplz_button_settings_border_color: rgba(248, 248, 239, 0.35);
	--cmplz_button_settings_text_color: rgba(248, 248, 239, 0.72);

	--cmplz_slider_active_color: #af8644;
	--cmplz_slider_inactive_color: rgba(248, 248, 239, 0.28);
	--cmplz_slider_bullet_color: #0c203e;
}

/* The header carries a logo slot, a centred title and a close cross. On a
   400px navy box that is three competing things above two lines of text, so
   the row goes: the message is the message. The X goes with it — an X that
   silently means "ask me again later" is the least honest control on a
   consent banner, and "Neigti" says the same thing out loud.

   The TITLE stays, clipped rather than removed: the banner is a
   `role="dialog"` whose `aria-labelledby` points at it, and display:none
   would leave the dialog with no accessible name at all. `display: contents`
   on the header dissolves it as a grid row without hiding its subtree.

   Every selector here is prefixed with `body` on purpose. Complianz's own
   rules are `.cmplz-cookiebanner .cmplz-header` — the same 0,2,0 specificity
   as the obvious version of these, and its stylesheet loads second, so a tie
   goes to the plugin. The first cut of this block lost that tie and the
   header stayed on screen. */
body .cmplz-cookiebanner .cmplz-header { display: contents; }
body .cmplz-cookiebanner .cmplz-logo,
body .cmplz-cookiebanner .cmplz-close,
body .cmplz-cookiebanner .cmplz-divider { display: none; }
body .cmplz-cookiebanner .cmplz-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Complianz's own floating "manage consent" tab, which slides out of the
   bottom-right corner on hover. The footer already carries that link, and two
   controls for one job in opposite corners is the opposite of minimal. */
#cmplz-manage-consent { display: none; }

/* House rule at the top of this file: radius 0, no shadows, hairlines.
   Complianz ships a two-layer drop shadow and adds a heavier one on hover, so
   all three of its rules are overridden rather than softened. A navy panel on
   a cream page separates itself; it does not need to float. */
.cmplz-cookiebanner,
body .cmplz-cookiebanner.cmplz-show,
body .cmplz-cookiebanner.cmplz-show:hover {
	box-shadow: none;
}
body .cmplz-cookiebanner {
	font-family: var(--kb-sans);
	padding: 22px 24px 20px;
}
body .cmplz-cookiebanner .cmplz-message { margin-bottom: 4px; line-height: 1.55; }
.cmplz-cookiebanner .cmplz-message a { text-decoration: none; border-bottom: 1px solid rgba(175, 134, 68, 0.5); }

/* Buttons borrow .kb-btn's voice — uppercase, tracked, square, thin. */
/* Three equal columns, the whatajazz.lt arrangement. Complianz ships
   `flex: initial` + `white-space: nowrap`, so each button takes its text's
   width and the row comes out lopsided — PRIIMTI tiny, PERŽIŪRĖTI NUOSTATAS
   wide. `flex: 1 1 0` with `min-width: 0` divides the row into thirds
   regardless of label length. Wrapping is allowed because at 400px the
   longest label needs two lines rather than an overflow. */
body .cmplz-cookiebanner .cmplz-buttons { align-items: stretch; }
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	white-space: normal;
	min-height: 0;
	padding: 11px 8px;
	font-family: var(--kb-sans);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.25;
	border-width: 1px;
	border-style: solid;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
	border-color: var(--kb-brass);
	color: var(--kb-paper);
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover { background-color: var(--kb-paper); border-color: var(--kb-paper); }

.cmplz-cookiebanner .cmplz-links .cmplz-link { text-decoration: none; letter-spacing: 0.06em; }
.cmplz-cookiebanner .cmplz-links .cmplz-link:hover { color: var(--kb-paper); }

/* Complianz stacks the buttons full-width below 768px. That was the right
   call when the third label was "Peržiūrėti nuostatas"; with "Nustatymai" all
   three fit a row at 390px, and three full-bleed bars stacked under two lines
   of text made the banner feel like a menu rather than a question. Keep the
   row, and let the labels wrap inside their third if the screen is very
   narrow — equal thirds of a small row still beat three stacked bars. */
@media (max-width: 768px) {
	body .cmplz-cookiebanner .cmplz-buttons { flex-direction: row; }

	/* Make it a panel ON the page rather than a band OF it. Complianz pins the
	   banner edge-to-edge at `bottom: 0` on phones, and on this site that lands
	   a flat navy rectangle flush against a navy hero or hard up under a cream
	   section — so it reads as one more stripe of the page, which is exactly
	   what a consent notice must not read as.

	   The separation is done with an inset and an edge, because the two usual
	   tools are both out: a drop shadow contradicts the house rules at the top
	   of this file, and a dimmed backdrop can't be had without JavaScript
	   (Complianz only adds `body.cmplz-banner-active` when the soft cookiewall
	   is enabled, which it isn't here — checked in the plugin's own JS rather
	   than assumed). What is left is honest anyway: 12px of the page showing
	   on all three sides. The brass hairline that does the other half of the
	   work is on the token above, because desktop turned out to need it too.

	   `max()` with the safe-area inset keeps the panel clear of the iOS home
	   indicator and the Safari toolbar, which sit exactly where a 12px gap
	   would otherwise put the buttons. */
	body .cmplz-cookiebanner {
		left: 12px;
		right: 12px;
		bottom: max(12px, env(safe-area-inset-bottom, 12px));
		width: auto;
	}
}
@media (max-width: 420px) {
	body.theme--kb { --cmplz_button_font_size: 0.62rem; }
	body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { padding: 11px 4px; letter-spacing: 0.06em; }
	body .cmplz-cookiebanner { padding: 20px 18px 18px; }
}

/* Landscape phone. Complianz ships a `@media (max-height: 400px)` block that
   assumes a short screen means a banner too tall to fit, so it stretches the
   panel to `height: calc(100vh - 20px)`, makes the body `flex: 1`, sets the
   buttons to `height: 15vh`, and shrinks the whole thing with `zoom: 0.6`
   (and `zoom: 0.5` again on the buttons). On a banner with two lines of text
   that produces a full-height panel with the message stranded at the top,
   roughly 140px of nothing in the middle, and the buttons pinned to the
   bottom — which is exactly what a phone held sideways was showing.

   None of those assumptions hold here: our banner is short. So this block
   gives the height back to the content. It has to answer `!important` with
   `!important`, and it repeats the plugin's own media condition rather than
   our 460px landscape one, so the two switch on together. `zoom` is reset
   rather than compensated for — it scales layout AND fonts AND the reported
   geometry, so leaving it on would make every measurement here a lie. */
@media (max-height: 400px) {
	body .cmplz-cookiebanner {
		height: auto !important;
		max-height: calc(100vh - 20px);
		zoom: 1 !important;
		padding: 18px 18px 16px !important;
		gap: 12px;
	}
	body .cmplz-cookiebanner .cmplz-body {
		flex: 0 1 auto !important;
		margin-top: 0 !important;
	}
	body .cmplz-cookiebanner .cmplz-buttons {
		gap: 8px !important;
	}
	body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		height: auto !important;
		zoom: 1 !important;
		font-size: var(--cmplz_button_font_size) !important;
		line-height: 1.25 !important;
		padding: 11px 8px !important;
		white-space: normal !important;
	}
}

/* Category rows, seen only behind "Nustatymai". The default is a pale grey
   card, which on navy reads as a hole in the panel. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background-color: rgba(248, 248, 239, 0.05);
	border: 1px solid var(--kb-line-inv);
}

/* ── Voucher check page /kuponas/ (1.9.2, inc/kb-voucher-public.php) ─────────
   Phone first: baristas open it from the voucher's QR. One card: number,
   value, status, facts, one button. Brass only as the card's top fill. */
.kb-vpub .kb-page__inner { max-width: 560px; }
.kb-vpub__card {
	border: 1px solid var(--kb-line);
	border-top: 4px solid var(--kb-brass);
	background: #fff;
	padding: 22px 22px 24px;
	margin: 0 0 28px;
}
.kb-vpub__code { font-family: var(--kb-sans); font-size: 1.05rem; letter-spacing: 0.14em; margin: 0 0 6px; }
.kb-vpub__value { font-family: var(--kb-serif); font-size: 2.4rem; line-height: 1.1; margin: 0 0 14px; }
.kb-vpub__state {
	display: inline-block;
	margin: 0 0 16px;
	padding: 6px 12px;
	font-family: var(--kb-sans);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 1px solid var(--kb-ink);
}
.kb-vpub__state.is-active { background: var(--kb-ink); color: var(--kb-paper); }
.kb-vpub__state.is-used,
.kb-vpub__state.is-expired { color: var(--kb-grey-dark); border-color: var(--kb-line); }
.kb-vpub__facts { display: grid; grid-template-columns: 8.5em 1fr; gap: 6px 12px; margin: 0 0 20px; }
.kb-vpub__facts dt { color: var(--kb-grey-dark); }
.kb-vpub__facts dd { margin: 0; }
.kb-vpub__redeem { width: 100%; text-align: center; background: var(--kb-ink); color: var(--kb-paper); }
.kb-vpub__notice,
.kb-vpub__error { border-left: 3px solid var(--kb-brass); padding: 4px 0 4px 14px; margin: 0 0 20px; }
.kb-vpub__hint { color: var(--kb-grey-dark); font-size: 0.92rem; }
.kb-vpub__find label,
.kb-vpub__pin label { display: block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 8px; }
.kb-vpub__row { display: flex; gap: 8px; }
.kb-vpub__row input {
	flex: 1;
	min-width: 0;
	font-size: 16px;
	padding: 10px 12px;
	border: 1px solid var(--kb-ink);
	border-radius: 0;
	background: #fff;
	text-transform: uppercase;
}


/* "Jau esate verslo klientas? Prisijunkite" at the foot of the info panel (1.11.1). */
.kb-prose .kb-b2b__login,
.kb-b2b__login { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--kb-line-inv); color: rgba(var(--kb-paper-rgb), 0.8); font-size: 0.88rem; }
.kb-prose .kb-b2b__login a,
.kb-b2b__login a { color: var(--kb-paper); border-bottom: 1px solid var(--kb-paper); }