/*
Theme Name: Vytintas
Theme URI: https://vytintas.lt
Author: AdMoon
Description: Block theme for vytintas.lt - a Lithuanian smoked-fish shop. Built from the signed-off Figma file EVC6KIDqS9Bpieo5HGu4Sj (desktop frames, 1440px). WooCommerce storefront with EUR, VAT-inclusive pricing and guest checkout.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vytintas
Tags: block-theme, e-commerce, full-site-editing
*/

/* -------------------------------------------------------------------------
   Every px, hex and weight below was read from a Figma node, not estimated.
   The node id sits in a comment beside anything non-obvious so the next
   session can re-open the exact layer instead of re-deriving it.

   Design constants, measured once and reused everywhere:
     frame width   1440px
     gutter          64px   (logo left edge, and cart badge right edge)
     content width 1312px   (1440 - 2 x 64)
     header height   77px   + a 1px #F3F4F6 hairline

   The header height is the one place the design disagrees with itself. Six of
   the seven frames draw a 77px band; only Pagrindinis draws 81. The site is
   built on 77, because a 4px jump in the header every time someone leaves the
   home page is a visible defect and the majority is unambiguous. Recorded in
   docs/OPEN-QUESTIONS.md Q14.
   ---------------------------------------------------------------------- */

/* --- Base ------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
}

:where(a) {
	color: inherit;
}

:where(:focus-visible) {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	border-radius: 2px;
}

/* The theme's own markup owns its spacing, so the screen-reader skip link is
   the one thing that must stay reachable without appearing in the layout. */
.vyt-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 20px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--base);
}

.vyt-skip-link:focus {
	left: 0;
}

/* --- Shared shell ------------------------------------------------------ */

.vyt-shell {
	max-width: calc(1312px + (2 * var(--wp--custom--gutter)));
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

/* --- Icons ------------------------------------------------------------
   Icons are inlined as <svg> rather than <img> so a WooCommerce fragment
   refresh cannot leave a broken image behind, and so the cart count can sit
   on top of one. Their fills are baked in from the Figma node (see
   tools/clean-figma-icon.py) - never inherited, never currentColor. */

.vyt-icon {
	display: block;
	flex: none;
}

/* --- Header (node 1:1543) --------------------------------------------- */

.vyt-header {
	position: relative;
	z-index: 20;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line); /* node 1:1544 */
}

.vyt-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--wp--custom--header--height);
}

/* The logo is NOT vertically centred in the design: it sits 7px from the top of
   the 81px band, leaving 12px underneath. Centring it lands 3px low. */
.vyt-header__brand {
	display: flex;
	align-self: flex-start;
	flex: none;
	padding-top: 8px;
}

/* node 39:591 - 55 x 62, 7px from the top of the band */
.vyt-header__logo {
	display: block;
	width: 55px;
	height: 62px;
}

/* Measured item positions at 1440: the first nav link starts at x=395 and the
   logo ends at x=119, so the nav is offset 276px from the brand and is neither
   centred in the frame (12.5px out) nor centred in the free space (19px out).
   The offset is applied only at the width the design actually specifies; below
   that there is no design to be faithful to and the nav simply pushes right. */
.vyt-nav {
	display: flex;
	align-items: flex-start;
	align-self: flex-start;
	/* 40px between items, from the six frames that agree; Pagrindinis draws 32. */
	gap: 40px;
	/* The nav is not vertically centred in the band: node 39:574 is a 27px box
	   at y=24, with the active rule along its bottom edge at y=51. */
	margin-top: 24px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 1400px) {
	.vyt-nav {
		/* The first nav link starts at x=383 and the logo ends at 119, so the
		   nav is offset 264px, less the 24px the flex row already contributes. */
		margin-left: 240px;
		margin-right: auto;
	}
}

.vyt-nav__list {
	display: flex;
	align-items: center;
	/*
	 * 45px, WHERE THE DESIGN MEASURES 40. This browser sets Inter about 5%
	 * narrower than Figma does at 14px, so the five nav labels come out 24px
	 * shorter in total than the boxes the design draws for them. Held to the
	 * design's own gap, that shortfall accumulates and the last item lands 21px
	 * left of where it is drawn.
	 *
	 * The gap is the compensation because the POSITIONS are what a reader sees:
	 * at 45 the row lands on 383 / 503 / 625 / 732 / 961 against the design's
	 * 383 / 502 / 621 / 728 / 962. Same reasoning as the promise titles further
	 * down, where the same mismatch runs the other way in Lora.
	 */
	gap: 44px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Inter Medium 14/21 #374151 - NOT 15/23, which is what this said and what it
 * shipped as. FIVE of the six frames draw the nav at 14/21 and put the items on
 * exactly 383 / 502 / 621 / 728 / 962; only Pagrindinis draws 15/23 and moves
 * them. It is one header, so it takes the majority, the same way the 40px gap
 * below already does. At 15px every item was a few pixels wide and the row drifted
 * up to 11px out by the last link.
 *
 * The active item's box is 27px tall (node 39:1317, y=24..51) with the rule on
 * its bottom edge, so a 21px line needs 4 above and 2 below to keep the rule at
 * y=51 where the design draws it.
 */
.vyt-nav__link {
	position: relative;
	display: block;
	padding-block: 4px 2px;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	line-height: 21px;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--wp--custom--transition);
}

.vyt-nav__link:hover {
	color: var(--wp--preset--color--ink);
}

/* node 1:1546 - the active item is Semi Bold with a 2px #F54C2D rule under it */
.vyt-nav__item.is-active .vyt-nav__link {
	font-weight: 600;
}

.vyt-nav__item.is-active .vyt-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--brand);
}

/* --- Mobile navigation controls ---------------------------------------
   The design has no mobile frame, so neither of these controls exists in it.
   The shape is the one this agency's own reference pass converged on (four
   independent sites, 2026-08-12, recorded in the figma-to-wordpress skill):
   logo left, toggle right, full-screen stacked panel, close top right, no
   pills. Derived, and listed as derived in docs/DECISIONS.md. */

.vyt-nav-toggle,
/* THE PANEL'S HEAD ROW EXISTS ONLY INSIDE THE PANEL. It is emitted by
   inc/nav.php into the same <nav> the desktop bar uses, so without this the
   logo it holds rendered a SECOND time in the desktop header, beside the real
   one - caught on a desktop check straight after adding it, which is the check
   Matas asked for after "you might have reintroduced some old fixes". It is
   turned back on with the close button in the 1024 block. */
.vyt-nav__head {
	display: none;
}

/* A CONTROL RESET, BECAUSE IT NEVER HAD ONE. `.vyt-nav-toggle` had exactly two
   declarations in this file - `display: none` above and `display: flex` with a
   44x44 box at 1024 - so between them Chrome's own <button> styling drew it: the
   computed style read `padding: 1px 6px`, a border, a grey fill and Arial. That
   is the "random square" Matas saw around the menu icon, and the 6px/1px padding
   is why the icon inside it was not centred. Everything except `display` is set
   here so the two breakpoints cannot disagree about the control. */
.vyt-nav-toggle {
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink-strong);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.vyt-nav__close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* nodes 39:579 / 39:588 / 39:589 - a 16px bag at x=1261, the label from x=1286,
   the badge at 1356. Pagrindinis draws a 20px bag; the other six draw 16. */
.vyt-cart-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding-right: 28px;
	color: var(--wp--preset--color--ink-strong);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
}

.vyt-cart-link__count {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 16px;
}

/* --- Buttons ----------------------------------------------------------
   Primary  node 1:1300 - 52px tall, radius 26, #F54C2D, Inter Medium 16/26.
   Secondary node 1:1309 - 54px tall, radius 27, 1px #1F2937 border, no fill.
   The 2px height difference is what the design says, so it is what is built. */

.vyt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	padding-inline: 24px;
	border: 0;
	border-radius: 26px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	line-height: 26px;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--wp--custom--transition);
}

.vyt-btn--secondary {
	height: 54px;
	border: 1px solid var(--wp--preset--color--ink-strong);
	border-radius: 27px;
	background: transparent;
	color: var(--wp--preset--color--ink-strong);
}

/* --- Editable buttons -------------------------------------------------
   Content buttons are CORE button blocks, not theme markup, so the client can
   retype a label or repoint a link without touching a template. theme.json
   gives the fill, radius and type; the rules below add the design's outline
   variant and its trailing icons.

   Icons ride as masks rather than inline SVG because a core button holds only
   text - and the mask's colour is set explicitly here, from the node, so an
   icon can never inherit a colour nobody chose. */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	text-decoration: none;
}

/* node 1:1309 - 54px tall, radius 27, 1px #1F2937, no fill */
.wp-block-button.is-style-outline .wp-block-button__link {
	height: 54px;
	border: 1px solid var(--wp--preset--color--ink-strong);
	border-radius: 27px;
	background: transparent;
	color: var(--wp--preset--color--ink-strong);
}

.vyt-btn-icon .wp-block-button__link::after,
.vyt-btn--icon::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	flex: none;
	background-color: var(--vyt-btn-icon-color);
	-webkit-mask: var(--vyt-btn-icon) center / contain no-repeat;
	mask: var(--vyt-btn-icon) center / contain no-repeat;
}

/* Each icon's colour is read from its own node, never inherited - the hero's
   two buttons prove why: the arrow on the filled button is white and matches
   its label, but the play glyph on the outlined one is #4B5563 while that
   button's label is #1F2937. currentColor would silently get one of them wrong. */
.vyt-btn-arrow {
	--vyt-btn-icon: url("assets/icons/arrow-right.svg");
	--vyt-btn-icon-color: var(--wp--preset--color--base);
}

.vyt-btn-play {
	--vyt-btn-icon: url("assets/icons/circle-play.svg");
	--vyt-btn-icon-color: var(--wp--preset--color--text-muted);
}

/* --- Footer (node 1:1221) --------------------------------------------- */

.vyt-footer {
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--line); /* node 1:1222 */
	padding-block: 48px 0;
}

/* node 1:1230 - the five columns sit in a 1312px band with a hairline under it */
.vyt-footer__columns {
	display: grid;
	/*
	 * FLUID BY DEFAULT, EXACT AT THE DESIGN'S WIDTH.
	 *
	 * The five columns are NOT equal in the design. Their left edges inside the
	 * 1312px band are 0, 270, 542, 793 and 1052, and the band ends at 1312, so
	 * with the 64px gutter between them the widths add up exactly:
	 * 206+208+187+195+260 + (4 x 64) = 1312. Three equal fr columns put the third
	 * heading 11px off, which is why the fixed widths exist at all.
	 *
	 * But those widths ONLY fit inside a 1312px band, and the band is only 1312
	 * at 1440 and above. Applied from 1025px up - which is what this rule used to
	 * do - the footer demanded 1312px of a 1152px column and pushed the whole
	 * DOCUMENT to 1376px wide at 1280. Every page, not just this one, with a
	 * horizontal scrollbar at one of the most common laptop widths.
	 *
	 * The alignment sweep passed at 1280 throughout, because a band that overflows
	 * the viewport still sits on the content column's left edge. The verify pass's
	 * responsive check is what found it.
	 */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 40px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(17, 24, 39, 0.08); /* node 1:1231 */
}

@media (min-width: 1440px) {
	.vyt-footer__columns {
		grid-template-columns: 206px 208px 187px 195px 260px;
		gap: 64px;
	}
}

/* node 13:52 - 66 x 74 */
.vyt-footer__logo {
	display: block;
	width: 66px;
	height: 74px;
	margin-bottom: 24px;
}

/* node 1:1233 - Inter Regular 12/20, #6B7280 */
.vyt-footer__tagline {
	margin: 0;
	max-width: 166px;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
}

/* nodes 1:1250 / 1:1256 / 1:1261 / 1:1284 - Lora Bold 14/20, #111827 */
.vyt-footer__heading {
	margin: 0 0 16px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 20px;
}

/* nodes 1:1251+ - Inter Regular 12/16 on a 26px rhythm, #4B5563 */
.vyt-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

/* The rhythm is 26px between link baselines - 16px of line plus a 10px gap. The
   list item has to carry the 16px line-height too, or it inherits the body's
   1.6 and every row after the first drifts 6px further down. */
.vyt-footer__list li {
	line-height: 16px;
}

.vyt-footer__list a {
	display: block;
}

.vyt-footer__list a,
.vyt-footer__list .vyt-footer__pending,
.vyt-footer__contact a,
.vyt-footer__contact span {
	display: block;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 16px;
	text-decoration: none;
}

.vyt-footer__list a:hover,
.vyt-footer__contact a:hover {
	color: var(--wp--preset--color--brand);
}

/* nodes 1:1262 / 1:1268 / 1:1276 - 14px icon, text starts 22px from the icon's left */
.vyt-footer__contact {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

/* The 14px icon and its 16px line are centred on each other, not top-aligned -
   top-aligning leaves the icon sitting a pixel high, which the fidelity engine
   flags on all three rows. */
.vyt-footer__contact li {
	display: grid;
	grid-template-columns: 14px 1fr;
	gap: 8px;
	align-items: center;
}

/* node 1:1285 */
.vyt-footer__newsletter-text {
	margin: 0 0 12px;
	max-width: 233px;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
}

/* node 1:1286 - 260 x 40 white pill; node 1:1288 - 30 x 28 orange send button */
/*
 * 260 AS A CEILING, NOT A WIDTH - and this was a horizontal scrollbar on every
 * page of the site from about 1025 to 1264.
 *
 * Above 1024 the footer is five equal columns, so at 1180 each one is 191px and
 * a 260px form ran 69px past its own column and 18px past the VIEWPORT. At 1440
 * the columns are the design's explicit 206/208/187/195/260, so the fifth is
 * exactly 260 and the ceiling still measures the design's width there.
 *
 * Found by a width sweep, not by `align-sweep`, which samples 1024, 1280, 1440
 * and 1920 and steps straight over the whole band. Its overflow widths now
 * include 1180 for exactly that reason.
 */
.vyt-newsletter {
	position: relative;
	width: 100%;
	max-width: 260px;
}

.vyt-newsletter__input {
	width: 100%;
	height: 40px;
	padding: 0 52px 0 16px;
	border: 0;
	border-radius: 40px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink-strong);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 22px;
}

.vyt-newsletter__input::placeholder {
	color: var(--wp--preset--color--text-faint);
}

.vyt-newsletter__submit {
	position: absolute;
	right: 6px;
	top: 6px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 28px;
	border: 0;
	border-radius: 50px;
	background: var(--wp--preset--color--brand);
	cursor: pointer;
}

/* nodes 1:1234 / 1:1240 - 32px #F3F4F6 circles holding a 16px glyph */
/*
 * RIGHT-ALIGNED, flush with the content edge. Nodes 1:1234 / 1:1240 sit at
 * x=1300 and x=1344 and the column ends at 1376; the build had them at 1116 and
 * 1160, i.e. hard against the column's LEFT edge.
 *
 * Three independent visual passes flagged this on three different pages before
 * anything measured it - it is on every page of the site, and no geometry check
 * would ever have reported it, because a left-aligned row inside a correctly
 * placed column is not a misalignment to anything the sweep knows about.
 */
.vyt-social {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
}

.vyt-social__link {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	background: var(--wp--preset--color--line);
}

/* nodes 1:1223 / 1:1224 - Inter Regular 11/17, #9CA3AF */
.vyt-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 24px;
	color: var(--wp--preset--color--text-faint);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 17px;
}

.vyt-footer__made {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* --- Shop hero (nodes 1:788 / 1:789 / 39:595) --------------------------
   Note the palette change: this page and its cards use a SLATE ramp
   (#1E293B, #52525B, #A1A1AA, #E8E6E1) where the home page uses Tailwind
   grey. That is the design's choice, not a slip - it is consistent across
   every element on the frame - so both ramps are tokens. */

.vyt-shop-hero {
	padding-block: 44px 48px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.vyt-shop-hero__inner {
	display: grid;
	grid-template-columns: 440px minmax(0, 1fr);
	gap: 32px;
	align-items: center;
}

/* node 1:788 - Lora 700 60/60, -1.5px */
.vyt-shop-hero__title {
	margin: 0 0 16px;
	color: var(--wp--preset--color--ink-slate);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 60px;
	font-weight: 700;
	line-height: 60px;
	letter-spacing: -1.5px;
}

/*
 * node 1:789 - Inter 400 18/28 #52525B.
 *
 * THE 392px CAP HAD TO GO, and it is the same one-pixel trap as the shop's
 * promise band. Figma reports the node as 392 wide; the browser measures its
 * longer line at 393. Capped at 392 the line the design draws whole broke after
 * "paruošta" and the block grew from 56px to 84.
 *
 * min(100%, max-content) caps it at its own longest line - which is what the 392
 * was approximating - and at the column on narrow screens, so the explicit line
 * break in the block decides the shape and nothing re-wraps behind it.
 */
.vyt-shop-hero__lead {
	margin: 0;
	max-width: min(100%, max-content);
	color: var(--wp--preset--color--text-slate-mid);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 28px;
}

/* node 39:595 - 838 x 168, flush to the right edge of the content band */
.vyt-shop-hero__media {
	margin: 0;
	border-radius: var(--wp--custom--radius--panel);
	overflow: hidden;
	aspect-ratio: 838 / 168;
}

.vyt-shop-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Shop archive (node 1:381) -----------------------------------------
   Four 223px columns starting at x=432, which is where the 339px filter rail
   plus its 29px gutter ends. Column gap 17, row gap 16. */

.vyt-shop {
	padding-block: 40px 64px;
}

.vyt-shop__grid {
	display: grid;
	grid-template-columns: 339px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

/* The rail is the four filter panels plus the clear button, and the design puts
   the SAME 24px between all five (panels at y=425/616/827/1048, button at 1329).
   The 24px inside the panels comes from WooCommerce's own content grid, so
   without this the button sits flush against the last panel while every gap
   above it is right - which is exactly how it shipped. */
.vyt-shop__rail {
	display: grid;
	gap: 24px;
	align-content: start;
}

.vyt-shop__results {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px 16px;
}

.vyt-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--base);
	line-height: 22px;
}

/* node 1:425 - Plus Jakarta Sans 400 14/20. The sort control beside it stays
   Inter, which is what the file draws. */
.vyt-shop__count {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui);
	line-height: 20px;
}

.vyt-shop__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 48px 24px;
	border: 1px dashed var(--wp--preset--color--line-warm);
	border-radius: var(--wp--custom--radius--panel);
	color: var(--wp--preset--color--text-soft);
	text-align: center;
}

/* --- Hero (node 1:1297) ------------------------------------------------
   Text column on the left at the 64px gutter, media on the right at x=744.
   H1 Lora 700 56/70 with -1px tracking; lead Inter 400 18/28 #4B5563. */

.vyt-hero {
	padding-block: 64px 52px;
}

.vyt-hero__inner {
	display: grid;
	/*
	 * minmax(0, Npx) - the design's width as a CEILING, not a floor. These tracks
	 * add up to the 1312px band, which only exists at 1440 and above; as plain
	 * fixed widths they demanded 1312 of a 1152px column at 1280 and pushed the
	 * document 96px wider than the viewport. A minmax track measures exactly N
	 * where there is room and shrinks proportionally where there is not.
	 */
	grid-template-columns: minmax(0, 631px) minmax(0, 632px);
	gap: 48px;
	align-items: start;
}

.vyt-hero__title {
	margin: 0 0 24px;
	max-width: 631px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display-l);
	font-weight: 700;
	line-height: 70px;
	letter-spacing: -1px;
}

.vyt-hero__lead {
	margin: 0 0 24px;
	max-width: 462px;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 28px;
}

.vyt-hero__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* node 1:1318 - 632 x 359, radius 31. It starts 17px ABOVE the heading rather
   than level with it, so the column is pulled up rather than top-aligned. */
.vyt-hero__media {
	margin: -17px 0 0;
	border-radius: var(--wp--custom--radius--media);
	overflow: hidden;
	aspect-ratio: 632 / 359;
}

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

/* --- Story band (nodes 1:1183 / 1:1184) --------------------------------
   A #111827 panel inset by the gutter, radius 20, with the smokehouse photo
   bleeding off its right edge under a left-to-right fade back to the panel
   colour. Body copy on dark is #DCE5F2, never plain white. */

.vyt-story {
	padding-block: 32px;
}

.vyt-story__panel {
	position: relative;
	display: grid;
	/* Measured off node 1:1184: text starts at x=52, the feature icons at x=539
	   and the second feature column at x=787. The photo starts at x=858 and the
	   second column runs under it - which is why the image carries a fade rather
	   than a hard edge. */
	grid-template-columns: minmax(0, 487px) minmax(0, 496px);
	min-height: 349px;
	/*
	 * 48px BOTTOM, not 0. The footnote is the last thing in the features
	 * column, so with no bottom padding its final line sat flush on the
	 * panel's edge - measured 2026-10-13: footnote 1420-1460, panel bottom
	 * 1460. Reducing its margin does not help; the column ends with the
	 * footnote either way, so the panel just gets shorter and the note stays
	 * on the edge. Only padding puts air under it. Every narrower breakpoint
	 * below already pads both ends - this was a desktop-only oversight.
	 */
	padding: 56px 52px 48px;
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--ink);
	overflow: hidden;
}

.vyt-story__title {
	margin: 0 0 24px;
	max-width: 472px;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display-m);
	font-weight: 700;
	line-height: 46px;
}

.vyt-story__lead {
	margin: 0 0 40px;
	max-width: 421px;
	color: var(--wp--preset--color--on-dark);
	font-size: var(--wp--preset--font-size--base);
	line-height: 22px;
}

/* node 1:1188 sits at y=1324 and the lead (1:1187) ends at 1267, so the gap is
   57px. It was 40 - Matas, review: "Skaityti daugiau is too high up." */
.vyt-story__more-wrap {
	margin: 56px 0 0;
}

/* node 1:1189 - the arrow beside "Skaityti daugiau" is white, like its label */
.vyt-story__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
}

.vyt-story__more::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--base);
	-webkit-mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
	mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
}

.vyt-story__features {
	display: grid;
	/*
	 * 214px COLUMNS ON A 248px PITCH - not 248px columns touching each other.
	 * Nodes 12:30 and 12:29 start at x=603 and x=851, and the first one's content
	 * is 214 wide, so there are 34px between them. Built as two 248px columns with
	 * a zero column-gap, the first feature's copy ran right up to the second
	 * feature's icon and "kuriame" collided with "Atrenkame".
	 */
	/* 224 = the 40px indent plus the 184px measure below, so a card contains its
	   own copy. The 24px gutter keeps column two starting at x=851, which is
	   where nodes 12:29 and 12:32 put it. */
	grid-template-columns: repeat(2, 224px);
	/* Rows 142px apart in the design (nodes 12:30 at y=1113, 12:31 at y=1255),
	   which is an 89px feature and a 53px gap. */
	gap: 52px 24px;
	align-content: start;
	padding-top: 4px;
}

/* node 12:18 - a 31px icon whose centre sits on the TITLE's centre line, 9px
   to its left (icon 603..634, title at 643). The copy is not part of that
   alignment; it starts at the title's x and flows below. */
.vyt-story__feature-head {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* node 12:30 is 89px tall and the next row starts 142px below it, so the row is
   the design's height and the 53px gap does the rest. A min-height rather than a
   fixed one: the copy is three lines in the design, and a longer line in another
   language should push the card down rather than spill out of it. */
.vyt-story__feature {
	min-height: 89px;
}

.vyt-story__feature .vyt-icon {
	flex: none;
	width: 31px;
	height: 31px;
}

.vyt-story__feature h3 {
	margin: 0 0 4px;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 20px;
}

/*
 * ONE RULE, NOT TWO. The indent used to live in its own `margin-left: 40px`
 * block above the h3, and this rule's `margin: 0` shorthand - later in the file,
 * same specificity - reset it to zero every time. The copy started under the
 * ICON instead of under the title, which is the whole visible defect.
 *
 * 40px = the 31px icon plus its 9px gap, so the copy lines up with the title.
 *
 * 184px IS A MEASURED WIDTH, NOT THE DESIGN'S. The design gives each of the
 * four boxes its own hand-set width - 174, 169, 186 and 157 - and every one
 * wraps to exactly three lines. Any single measure between 176 and 193 (checked
 * in the browser, at this face and size, against all four strings) reproduces
 * all twelve of the design's line breaks; 184 is the middle of that band, so a
 * small metric difference in either direction still lands inside it. One number
 * survives a copy edit in a way that four hand-set boxes do not.
 */
.vyt-story__feature p {
	margin: 0 0 0 40px;
	max-width: 184px;
	color: var(--wp--preset--color--on-dark);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
}

/* node 9:41 - 454 x 349 hard against the panel's right edge, faded back into
   the panel colour so it reads as part of the surface rather than a pasted-in
   rectangle. The gradient's 64.9% stop is the design's. */
/* The photo sits UNDER the copy. The second feature column runs from x=891 to
   about x=1139, which is inside the image's faded left region - in the design
   that copy reads over the fade, and without an explicit stacking order the
   absolutely-positioned image paints over it and hides two of the four
   features. The measurement pass cannot see this: every box is in the right
   place, one is just on top of another. */
.vyt-story__media {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
	width: 454px;
	margin: 0;
}

.vyt-story__text,
.vyt-story__features {
	position: relative;
	z-index: 1;
}

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

.vyt-story__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, var(--wp--preset--color--ink) 0%, rgba(17, 24, 39, 0) 64.9%);
}

/* --- Shop call to action (node 1:1209) ---------------------------------
   The home page's version: a #F5F5F3 panel inside the 1312px column. Kontaktai
   draws the same copy and the same link with no panel at all (1:1931), so that
   is the .vyt-cta--plain modifier further down rather than a second band. One
   component, two skins - see docs/OPEN-QUESTIONS.md Q17. */

.vyt-cta {
	padding-block: 24px;
}

.vyt-cta__panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 92px;
	/* 43 left, 33 right - node 1:1211 starts at x=107 and node 1:1212 ends at
	   1343. The design is not symmetric about this panel. */
	padding: 0 32px 0 44px;
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--surface);
}

.vyt-cta__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: 700;
	line-height: 32px;
}

/* node 1:1212 - 44px tall, radius 22, Inter 500 14/22 - a smaller button than
   the hero's, so it is a variant rather than the same control. */
.vyt-btn--compact,
.is-compact .wp-block-button__link {
	height: 44px;
	/* node 1:1212 is 180 wide around a 109px label and a 16px glyph: 24px of
	   inset either side and 7px between the two, not the 10px gap the full-size
	   buttons carry. */
	gap: 8px;
	padding-inline: 24px;
	border-radius: 22px;
	font-size: var(--wp--preset--font-size--base);
	line-height: 22px;
}

/* --- Section header (node 1:1319) --------------------------------------
   Title on the left, "see all" on the right, shared by every band that has
   both. Title Lora 700 24/32 at y=47 inside the band; link Inter 600 14/20
   with a 16px chevron. */

.vyt-section {
	padding-block: 48px 48px;
}

.vyt-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}

.vyt-section__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: 700;
	line-height: 32px;
}

.vyt-section__link {
	display: inline-flex;
	align-items: center;
	/* node 8:38 - the label ends at 1356 and the chevron starts at 1360. */
	gap: 4px;
	flex: none;
	color: var(--wp--preset--color--ink-strong);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
}

.vyt-section__empty {
	margin: 0;
	padding: 24px;
	border: 1px dashed var(--wp--preset--color--text-faint);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--base);
}

/* --- Product card (node 1:1391) ----------------------------------------
   Five 247px cards with a 19px gap fill the 1312px band exactly
   (5 x 247 + 4 x 19 = 1311). The track is written in fr so the same card
   works in the shop's four-column grid without a second set of numbers. */

.vyt-card-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
}

.vyt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 324px;
	padding: 12px 16px 16px;
	border-radius: 10px;
	background: #f9f9f8;
}

.vyt-card__media {
	display: block;
	margin: 0 -5px 24px;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 225 / 167;
}

.vyt-card__image,
.vyt-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* node 1:1407 - 94 x 25 at (19, 22) inside the card */
.vyt-card__badge {
	position: absolute;
	left: 19px;
	top: 22px;
	display: inline-flex;
	align-items: center;
	height: 25px;
	padding-inline: 12px;
	border-radius: 13px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 17px;
}

/* node 1:1393 - Lora 700 20/24 */
.vyt-card__title {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 24px;
}

.vyt-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* node 1:1394 - Inter 400 14/16 #6B7280 */
.vyt-card__weight {
	margin: 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--base);
	line-height: 16px;
}

/* node 1:1395 - Inter 700 20/28, pinned to the bottom so cards with a longer
   title still line their prices up on one baseline. */
.vyt-card__price {
	/* Pushed to the bottom of the card, then lifted 5px so its 28px line box
	   lands on the design's y=275..303 rather than flush against the padding. */
	margin: auto 0 4px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 28px;
}

.vyt-card__price .woocommerce-Price-amount {
	font-weight: 700;
}

/* node 1:1396 - 36px circle, rgba(229,231,235,0.7), holding a 16px #F54C2D bag */
.vyt-card__add {
	position: absolute;
	right: 17px;
	bottom: 16px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 40px;
	background: rgba(229, 231, 235, 0.7);
	transition: background var(--wp--custom--transition);
}

.vyt-card__add:hover {
	background: rgb(229, 231, 235);
}

/* --- Product card, shop variant (node 1:430) ---------------------------
   The shop grid draws the SAME component at a different size and in a
   different grey family - white with a warm #E8E6E1 edge instead of a flat
   #F9F9F8 fill, and slate text (#1E293B / #A1A1AA) rather than the home
   page's Tailwind grey. It is a variant of one card, not a second card. */

/* Padding is 13px, not 14: the design's coordinates are measured from the
   node's outer edge and this card has a 1px border, so 13 + 1 lands content on
   the design's x=14. */
.vyt-card--compact {
	min-height: 296px;
	/* Asymmetric on purpose: the design's content runs x=14 to x=207 inside a
	   223px card, so 14 on the left and 16 on the right, less the 1px border. */
	padding: 12px 16px 16px 12px;
	border: 1px solid var(--wp--preset--color--line-warm);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--base);
}

.vyt-card--compact .vyt-card__media {
	margin: 0 0 12px;
	aspect-ratio: 193 / 160;
}

.vyt-card--compact .vyt-card__title,
.vyt-card--compact .vyt-card__title a {
	margin-bottom: 8px;
	color: var(--wp--preset--color--ink-slate);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 20px;
}

.vyt-card--compact .vyt-card__weight {
	color: var(--wp--preset--color--text-slate);
	font-size: var(--wp--preset--font-size--sm);
}

.vyt-card--compact .vyt-card__price {
	margin-bottom: 4px;
	color: var(--wp--preset--color--ink-slate);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 24px;
}

.vyt-card--compact .vyt-card__add {
	right: 21px;
	bottom: 13px;
}

.vyt-card--compact .vyt-card__badge {
	left: 22px;
	top: 24px;
}


/* --- Categories and ordering band (node 1:1409) ------------------------
   Two columns: five category cards plus the delivery strip on the left at
   749px, the four ordering steps on the right at 524px, 39px between them. */

.vyt-order {
	padding-block: 48px 48px;
}

.vyt-order__grid {
	display: grid;
	/*
	 * minmax(0, Npx) - the design's width as a CEILING, not a floor. These tracks
	 * add up to the 1312px band, which only exists at 1440 and above; as plain
	 * fixed widths they demanded 1312 of a 1152px column at 1280 and pushed the
	 * document 96px wider than the viewport. A minmax track measures exactly N
	 * where there is room and shrinks proportionally where there is not.
	 */
	grid-template-columns: minmax(0, 749px) minmax(0, 524px);
	gap: 40px;
}

/* Five 141px cards on an 11px gap fill the 749px column exactly. */
.vyt-cats__grid {
	display: grid;
	grid-template-columns: repeat(var(--vyt-cats, 4), minmax(0, 1fr));
	gap: 12px;
	margin-top: 24px;
}

/* node 1:1411 - 141 x 171, #F9F9F8 with a 1px #F3F4F6 border, radius 20 */
.vyt-cat {
	display: block;
	min-height: 171px;
	/* 12px at the foot: see .vyt-cat__label. */
	padding: 8px 8px 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--panel);
	background: #f9f9f8;
	text-decoration: none;
}

/* node 12:39 - 119 x 98, radius 11 */
.vyt-cat__media {
	display: block;
	border-radius: 11px;
	overflow: hidden;
	aspect-ratio: 119 / 98;
}

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

/* node 1:1413 - Inter 600 12/16 #1F2937, centred, with a 12px arrow after it */
.vyt-cat__label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/*
	 * 16px, was 28. The 28 was measured off the Figma node where the row held
	 * FIVE 141px tiles and the photo was 98px tall. Deleting the gift category
	 * left four tiles at 178px, the photo grew with them to 132px, and the tile
	 * went 171 -> 186 - so the 28px gap stayed while the space under the label
	 * vanished. Measured before the change: 28px above the label, 2px below it.
	 * Now 16 above and 12 below, which reads as a caption rather than something
	 * that slipped off the bottom of the card.
	 */
	margin-top: 16px;
	color: var(--wp--preset--color--ink-strong);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 16px;
	text-align: center;
}

/* node 1:1461 - 749 x 87 strip, #F5F5F3, radius 20 */
.vyt-delivery {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 87px;
	margin-top: 24px;
	padding: 0 32px;
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--surface);
}

.vyt-delivery__icon {
	width: 40px;
	height: 40px;
	/* The artwork is 53x44, so a 40x40 box squashed it 17% - a lorry with the
	   wrong proportions, which reads as a slightly wrong drawing rather than as
	   a bug, and is why it survived every pass. `contain` keeps the 40px slot
	   the layout is built around and letterboxes the image inside it. */
	object-fit: contain;
	flex: none;
}

.vyt-delivery__main {
	margin-right: auto;
}

.vyt-delivery h3 {
	margin: 0 0 3px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 24px;
}

.vyt-delivery p {
	margin: 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 16px;
}

/* node 1:1465 - a 47px hairline, then the promised lead time */
.vyt-delivery__time {
	padding-left: 24px;
	border-left: 1px solid rgba(17, 24, 39, 0.1);
}

.vyt-delivery__time strong {
	display: block;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	line-height: 23px;
}

/* node 1:1470 - 524 x 280 panel holding four numbered steps on a 64px rhythm */
/*
 * THE RIGHT COLUMN HAS TO END WHERE THE LEFT ONE DOES. Measured 2026-10-13:
 * both columns are 1540-1893, but the steps card stopped at 1880 while the
 * left column's delivery strip ran to 1893 - so the two panels ended 13px
 * apart, which is exactly the kind of near-miss that reads as sloppy rather
 * than as a decision. The card now fills the column instead of being its
 * natural height.
 *
 * 13px, spread as extra padding inside a 24px-padded card. The four steps
 * keep their 64px rhythm untouched, so nothing is stretched or squashed.
 */
.vyt-order__right {
	display: flex;
	flex-direction: column;
}

.vyt-steps {
	flex: 1 1 auto;
	margin-top: 24px;
	padding: 24px 24px 24px;
	border-radius: var(--wp--custom--radius--panel);
	background: #f9f9f8;
}

/* Step titles sit on a 64px rhythm: a 41px block plus 23px between. Giving each
   step a 64px min-height instead adds one trailing gap after the last step and
   the panel comes out 24px taller than the design. */
.vyt-step {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 16px;
	min-height: 41px;
}

.vyt-step + .vyt-step {
	margin-top: 24px;
}

.vyt-step__icon {
	margin-top: 1px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid #e5e7eb;
	border-radius: 20px;
	background: var(--wp--preset--color--base);
}

/* node 1:1483 - the number rides on the circle's top-right corner */
.vyt-step__n {
	position: absolute;
	left: 28px;
	top: -4px;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
}

.vyt-step h3 {
	margin: 0 0 1px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 20px;
}

.vyt-step p {
	margin: 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
}

/* --- Gift banner (node 1:1527) -----------------------------------------
   A dark panel with a square photo bleeding off its right edge. */

.vyt-gift {
	padding-block: 24px;
}

.vyt-gift__panel {
	position: relative;
	min-height: 227px;
	padding: 32px 52px;
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--ink);
	overflow: hidden;
}

.vyt-gift__media {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
	width: 460px;
	height: 100%;
	margin: 0;
}

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

.vyt-gift__body {
	position: relative;
	z-index: 1;
}

/* node 1:1529 - 71 x 27, radius 50, with a 1px white-20% edge */
.vyt-gift__badge-wrap {
	margin: 0;
}

.vyt-gift__badge {
	display: inline-flex;
	align-items: center;
	height: 27px;
	padding-inline: 12px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 17px;
	letter-spacing: 0.55px;
	text-transform: uppercase;
}

/* node 1:1531 - 42px type on a 36px line, which is the design's own tight
   setting rather than a slip: the two-line variant on Parduotuvė relies on it. */
/* The design sets this on one line. A 620px cap forced a wrap and made the
   panel 71px taller than it should be. */
.vyt-gift__title {
	margin: 16px 0 0;
	max-width: 780px;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 42px;
	font-weight: 700;
	line-height: 36px;
}

.vyt-gift__lead {
	margin: 16px 0 0;
	color: #e5e7eb;
	font-size: var(--wp--preset--font-size--base);
	line-height: 20px;
}

/* node 1:1534 - a WHITE 225 x 48 button with a soft shadow, the only inverted
   button in the design. It is not stacked under the copy: it sits at x=544,
   y=148 inside the panel, beside the text rather than below it. */
/* Positioned against .vyt-gift__body, which starts inside the panel's 52/32
   padding - so these are the design's 544,148 less that padding. */
.vyt-gift__body .wp-block-buttons {
	position: absolute;
	left: 492px;
	top: 116px;
	margin: 0;
}

.vyt-gift__body .wp-block-button__link {
	height: 48px;
	/* node 1:1534 is 225x48 - 28px of inset either side of a 145px label and a
	   16px glyph, 8px between them. Built at 24 and 10 it came out 219 wide. */
	padding-inline: 28px;
	gap: 8px;
	border-radius: 24px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 22px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.vyt-gift__body .vyt-btn-arrow {
	--vyt-btn-icon-color: var(--wp--preset--color--ink);
}

/* --- Shop filter rail (node 1:581) -------------------------------------
   WooCommerce's own filter blocks do the filtering - verified end to end:
   5 products unfiltered, 3 under Vytinta žuvis, 1 under Kita produkcija. Only
   the appearance is the theme's, so the client keeps working facets and the
   plugin keeps owning the query. */

/* WooCommerce's filter wrapper lays itself out flex and lets its panels run
   wider than the 339px rail; every descendant is pinned to the border box so a
   panel cannot overflow the column it sits in. */
.vyt-shop__rail .wc-block-product-filters,
.vyt-shop__rail .wc-block-product-filters * {
	box-sizing: border-box;
	max-width: 100%;
}

.vyt-shop__rail .wc-block-product-filters {
	display: block;
	width: 100%;
	margin: 0;
}

.vyt-shop__rail .wc-block-product-filters__content {
	display: grid;
	gap: 24px;
	width: 100%;
	margin: 0;
}

/* The panels stretch to the rail and no further. Without this each one comes
   out 19px wider than its column - its own padding added outside the width the
   flex wrapper hands it - and the whole rail overhangs the grid. */
/* Grid items default to min-width:auto and refuse to shrink below their
   min-content width, so one panel's inner controls were forcing the whole track
   19px wider than the 339px rail. min-width:0 is what lets it shrink. */
.vyt-shop__rail .wc-block-product-filters__content > * {
	width: 100%;
	min-width: 0;
}

/* Each filter group is the design's white panel with a warm edge. */
.vyt-shop__rail .wc-block-product-filters__content > * {
	padding: 20px;
	border: 1px solid var(--wp--preset--color--line-warm);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--base);
}

/* node 1:584 - Lora 700 16/24, over a hairline that spans the panel's inner
   width. The heading is a core block inside WooCommerce's group, which is why
   the rule hangs off the theme's own class rather than a plugin one. */
.vyt-filter__title {
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wp--preset--color--line-warm);
	color: var(--wp--preset--color--ink-slate);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 24px;
}

/* nodes 1:590-1:606 - rows on a 30px rhythm, label at x=44, count hard right.
   WooCommerce wraps the list in a FIELDSET, which carries the browser's default
   2px groove border - a stray rectangle inside the panel until it is zeroed. */
.vyt-shop__rail fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.vyt-shop__rail .wc-block-product-filter-checkbox-list__items {
	display: grid;
	/* 30px between rows: a 20px line plus 10px. */
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vyt-shop__rail .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.vyt-shop__rail .wc-block-product-filter-checkbox-list__text-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
}

.vyt-shop__rail .wc-block-product-filter-checkbox-list__text {
	flex: 1;
	color: var(--wp--preset--color--ink-slate);
	font-size: var(--wp--preset--font-size--base);
	line-height: 20px;
}

/*
 * THE COUNT IS A RIGHT-ALIGNED COLUMN, NOT "(4)" AFTER THE LABEL.
 *
 * Nodes 1:596 / 1:601 / 1:606 put the number at x=366-373 against a panel whose
 * inner width ends at 382, while the label sits at x=109. The build printed it
 * inline in parentheses immediately after the label, so the count column was
 * gone entirely.
 *
 * The class is `__count`. An earlier rule here styled `__text-count`, which does
 * not exist in this WooCommerce version - so it had never applied to anything.
 *
 * The parentheses are bare text nodes in the plugin's markup and CSS cannot
 * delete a text node. font-size:0 on the wrapper collapses them and the inner
 * <span> carrying the number gets its size back.
 */
.vyt-shop__rail .wc-block-product-filter-checkbox-list__text-wrapper {
	width: 100%;
}

.vyt-shop__rail .wc-block-product-filter-checkbox-list__count {
	margin-left: auto;
	font-size: 0;
}

.vyt-shop__rail .wc-block-product-filter-checkbox-list__count span {
	color: var(--wp--preset--color--text-slate);
	font-size: 12px;
	line-height: 16px;
}

/* node 1:592 - 16px, radius 2; checked is a solid #1E293B, unchecked a 1px
   #1E293B outline on white. */
/*
 * node 1:599 - a 16px WHITE box with a 1px #1e293b edge, radius 2; checked
 * (node 1:591) is a solid #1e293b with a white tick.
 *
 * WooCommerce sets appearance:none and paints its own tick SVG, so accent-color
 * does nothing - which is what the previous rule relied on. The result was a
 * 14px box with a transparent background and a transparent border: the
 * checkboxes were INVISIBLE, and a visual pass reported them as flat grey
 * blocks because all that showed was the wrapper behind them.
 */
.vyt-shop__rail .wc-block-product-filter-checkbox-list__input-wrapper {
	position: relative;
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0;
}

/*
 * SET THE PLUGIN'S OWN VARIABLES rather than out-specify it. WooCommerce styles
 * this box from an inline rule shaped
 * `input[type="checkbox"].wc-block-product-filter-checkbox-list__input`, which
 * outranks a two-class theme selector - so the previous attempt lost silently
 * and the box kept the plugin's defaults of transparent-on-transparent, i.e.
 * INVISIBLE. Reading the winning rule showed it resolves its colours from
 * custom properties, and those are a supported hook that cannot lose.
 */
.vyt-shop__rail .wc-block-product-filters,
.vyt-shop__rail .wc-block-product-filter-checkbox-list {
	--wc-product-filter-checkbox-list-option-element: #fff;
	--wc-product-filter-checkbox-list-option-element-border: #1e293b;
	--wc-product-filter-checkbox-list-option-element-selected: #1e293b;
	--wc-product-filter-checkbox-list-label-element: var(--wp--preset--color--ink-slate);
}

/* Matching the plugin's selector shape for the geometry it does not expose. */
.vyt-shop__rail input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
	width: 16px;
	height: 16px;
	margin: 0;
	border-radius: 2px;
	cursor: pointer;
}

/*
 * node 1:591 - checked is a SOLID #1e293b box with a white tick. The
 * -option-element-selected variable does not drive the background in this
 * version, so the checked state is set here at the same selector strength.
 * Without it the tick was white on a white box: the row read as unchecked while
 * the filter was actually applied, which is worse than an unstyled control.
 */
.vyt-shop__rail input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
	background: #1e293b;
	border-color: #1e293b;
}

.vyt-shop__rail .wc-block-product-filter-checkbox-list__mark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 8px;
	transform: translate(-50%, -50%);
	color: #fff;
	pointer-events: none;
	opacity: 0;
}

.vyt-shop__rail .wc-block-product-filter-checkbox-list__input:checked + .wc-block-product-filter-checkbox-list__mark {
	opacity: 1;
}

.vyt-shop__rail .wc-block-product-filter-clear-button {
	text-align: center;
}

/* --- Catalogue sorting (node 1:426) ------------------------------------
   306 x 34, white, warm edge, radius 20, with the label and the value on one
   line. The label is the theme's element; the select is WooCommerce's. */

.vyt-shop__sort {
	display: flex;
	align-items: center;
	gap: 8px;
	/*
	 * 306px IS THE DESIGN'S WIDTH, NOT A FLOOR. `flex: none` with
	 * `min-width: 306px` made it unshrinkable, and at 360px the toolbar pushed
	 * the document to 420px - 60px of horizontal overflow on every phone. Found
	 * by the verify pass's responsive check, not by the alignment sweep, which
	 * only looks at 1280 and up.
	 *
	 * A 306px basis that is allowed to shrink still measures exactly 306 at 1440
	 * (there is room for it) and gives way when there is not.
	 */
	flex: 0 1 306px;
	min-width: 0;
	max-width: 100%;
	height: 34px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--line-warm);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--base);
}

.vyt-shop__sort-label {
	flex: none;
	color: var(--wp--preset--color--text-slate-soft);
	font-size: var(--wp--preset--font-size--base);
	line-height: 20px;
}

.vyt-shop__sort .woocommerce-ordering {
	margin: 0;
	flex: 1;
}

.vyt-shop__sort .orderby {
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink-slate-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	line-height: 22px;
	cursor: pointer;
}

/*
 * A footer row the design draws whose page the client has not supplied yet. It
 * is shown, because the client needs to see that the row is expected of them,
 * and it is not a link, because the page is not there (Q9).
 *
 * IT LOOKS EXACTLY LIKE THE ROWS AROUND IT. Greying it out was the first
 * instinct and it is worse: the design draws four links, and one dimmed row
 * announces an unfinished site to every visitor to solve a problem only the
 * client has. It stops being a <span> the moment the page exists.
 */
.vyt-footer__pending {
	cursor: default;
}

/* The notice that replaces WooCommerce's native alert when the add-to-cart
   button is pressed with no weight chosen - see assets/js/variations.js. */
.vyt-product__pick {
	margin: 0 0 12px;
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 16px;
}

/* THE TEXT DROPPED OUT OF CENTRE AS SOON AS A FIELD HAD CONTENT.

   WooCommerce reserves room for its floating label by padding a FILLED input
   `24px 9px 8px`, which is why an empty field looked right and a typed-in one did
   not - the state is `.is-active`, added when the field has a value. This theme
   puts the label ABOVE the field, so that reservation is 24px of nothing pushing
   the text onto the bottom edge of a 41px box. Matas: "The text doesnt centre in
   the input squares".

   THE SELECTOR LIST IS THE PLUGIN'S, VERBATIM, and it has to be. Its rule is
   three classes plus an attribute plus an element; a first attempt at three
   classes plus an element tied on nothing and lost, and the field measured
   exactly as wrong afterwards as before. */
.wc-block-components-form .wc-block-components-text-input.is-active input[type="email"],
.wc-block-components-form .wc-block-components-text-input.is-active input[type="number"],
.wc-block-components-form .wc-block-components-text-input.is-active input[type="password"],
.wc-block-components-form .wc-block-components-text-input.is-active input[type="tel"],
.wc-block-components-form .wc-block-components-text-input.is-active input[type="text"],
.wc-block-components-form .wc-block-components-text-input.is-active input[type="url"],
.wc-block-components-form .wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input.is-active input[type="email"]:focus,
.wc-block-components-form .wc-block-components-text-input.is-active input[type="number"]:focus,
.wc-block-components-form .wc-block-components-text-input.is-active input[type="password"]:focus,
.wc-block-components-form .wc-block-components-text-input.is-active input[type="tel"]:focus,
.wc-block-components-form .wc-block-components-text-input.is-active input[type="text"]:focus,
.wc-block-components-form .wc-block-components-text-input.is-active input[type="url"]:focus,
.wc-block-components-form .wc-block-components-text-input input:-webkit-autofill:focus,
.wc-block-components-text-input.is-active input[type="email"],
.wc-block-components-text-input.is-active input[type="number"],
.wc-block-components-text-input.is-active input[type="password"],
.wc-block-components-text-input.is-active input[type="tel"],
.wc-block-components-text-input.is-active input[type="text"],
.wc-block-components-text-input.is-active input[type="url"],
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input.is-active input[type="email"]:focus,
.wc-block-components-text-input.is-active input[type="number"]:focus,
.wc-block-components-text-input.is-active input[type="password"]:focus,
.wc-block-components-text-input.is-active input[type="tel"]:focus,
.wc-block-components-text-input.is-active input[type="text"]:focus,
.wc-block-components-text-input.is-active input[type="url"]:focus,
.wc-block-components-text-input input:-webkit-autofill:focus {
	padding: 0 16px;
}

/* node 1:989 - a 14px lock and Inter 12/16 #6b7280, under the payment methods. */
.vyt-checkout-secure {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 24px 0 0;
	color: var(--wp--preset--color--text-soft);
	font-size: 12px;
	line-height: 16px;
}

.vyt-checkout-secure .vyt-icon {
	flex: none;
	width: 14px;
	height: 14px;
}

/* --- The order button and the way back (nodes 1:874 / 1:883) ----------
   Both live in the summary column. assets/js/checkout.js is what puts the
   button there; everything below is what it looks like once it arrives.

   KEYED ON WooCommerce'S OWN `.wc-block-checkout__sidebar`, NOT ON A CLASS WE
   ADD. The script's first version marked the sidebar with `vyt-sidebar--has-
   actions` and every rule hung off that - and React OWNS that element's
   className, so it was wiped on the next re-render and none of this applied. The
   node move survives a re-render; a class added to a React-controlled element
   does not. The plugin's own class is stable, and it only matches the button
   once the button has been moved into it, which is the condition we wanted. */

.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-actions-block {
	margin: 24px 0 0;
	padding: 0;
	border: 0;
}

/* node 1:874 - 427x48, radius 60, brand orange, label Inter 600 14/22 white with
   a 16px arrow after it. Full width of the summary column. */
.wc-block-checkout__sidebar .wc-block-components-checkout-place-order-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	min-height: 48px;
	padding-inline: 24px;
	border-radius: 60px;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	line-height: 22px;
}

.wc-block-checkout__sidebar .wc-block-components-checkout-place-order-button::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
	mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
}

/* WooCommerce prints the order total inside the button. The design's label is
   just the action, and the total is already the largest thing on the card
   directly above it. */
.wc-block-checkout__sidebar .wc-block-components-checkout-place-order-button__separator,
.wc-block-checkout__sidebar .wc-block-components-checkout-place-order-button__price {
	display: none;
}

/* node 1:890 - Inter 500 12/16 #4b5563, centred, with a 14px arrow before it. */
.vyt-checkout-back {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
	color: var(--wp--preset--color--text-muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	text-decoration: none;
	transition: color var(--wp--custom--transition);
}

.vyt-checkout-back .vyt-icon {
	width: 14px;
	height: 14px;
}

.vyt-checkout-back:hover {
	color: var(--wp--preset--color--ink);
}

/* --- Apmokėjimo būdas: the method cards (nodes 1:990 - 1:1027) --------
   166x95 cards on an 11px gap, radius 20 on #fcfdfd, a #e5e7eb edge that turns
   brand orange on the chosen one, with an 8px orange dot in its top-left corner.

   STYLING THE PLUGIN'S OWN LIST, NOT MARKUP OF OUR OWN. No gateway is configured
   yet (Paysera is Q11), so this row is EMPTY on the site today and none of it is
   visible. That is the point: the alternative was building four cards by hand,
   and the moment any gateway is switched on WooCommerce renders its own list and
   the hand-built ones would have to be deleted. Matas: "let us not wire it up
   ... but just do as much as we can now so we wont have to later."

   THE CARD IS THE OPTION WRAPPER, NOT THE LABEL. A gateway's description is
   rendered in `__accordion-content`, which is a SIBLING of the label - styled on
   the label, the card cut across it and the description hung out of the bottom.

   Scoped to the PAYMENT block on purpose - the shipping options use the same
   radio-control classes and the design draws those as a plain list, not cards. */

/* FLEX RATHER THAN GRID, so one option can take a full row while its
   neighbours stay cards. See the Paysera block further down for why that
   matters: a grid's track count belongs to the CONTAINER, so the only way to
   widen one option there is to restyle every option at once. `flex: 0 1 166px`
   reproduces what `repeat(auto-fit, minmax(0, 166px))` drew - a left-aligned
   row of 166px cards that wraps, and shrinks rather than overflowing when the
   column is narrow. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: start;
	gap: 12px;
}

.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option {
	position: relative;
	flex: 0 1 166px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 95px;
	margin: 0;
	padding: 16px 12px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 20px;
	background: #fcfdfd;
	text-align: center;
	transition: border-color var(--wp--custom--transition);
}

.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__option-checked) {
	border-color: var(--wp--preset--color--brand);
}

.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control .wc-block-components-radio-control__option {
	/* STATIC, so the dot below anchors to the CARD and not to this label. The
	   plugin positions the label, and an absolutely-placed dot resolves against
	   the nearest positioned ancestor - it was landing beside the title, in the
	   middle of the card, instead of in its top-left corner. */
	position: static;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

/* node 1:1008 - the chosen card is marked by an 8px disc in its corner, not by
   the platform's radio. The input stays in the DOM and keeps the keyboard and
   the label wiring; it is the dot that is visible. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control .wc-block-components-radio-control__input {
	position: absolute;
	top: 10px;
	left: 11px;
	width: 8px;
	height: 8px;
	margin: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	background-image: none;
	box-shadow: none;
	appearance: none;
}

.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control .wc-block-components-radio-control__input:checked,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::after {
	border: 0;
	background: var(--wp--preset--color--brand);
	box-shadow: none;
	content: none;
}

.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--text-slate);
	outline-offset: 3px;
}

.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option-layout,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__label-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 100%;
}

/* node 1:1006 - Lora 700 12/16 #111827, and the strapline under it Inter 10/15
   #9ca3af. A gateway supplies its own title and description; both land here. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__label {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
}

.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__secondary-label,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-content {
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--text-faint);
	font-size: 10px;
	line-height: 15px;
	text-align: center;
}

/* A gateway that ships an icon gets the design's 24px slot for it. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-payment-method-icons {
	margin: 0 0 2px;
}

.wp-block-woocommerce-checkout-payment-block .wc-block-components-payment-method-icons img {
	max-height: 24px;
	width: auto;
}

/* --- A GATEWAY THAT EXPANDS INTO A PANEL CANNOT LIVE IN A 166px CARD ----

   Everything above this was written when the shop had NO payment gateway at
   all. The design draws four small cards in a row (node 1:1008) and that is
   what the rules above build: a 166px box, a centred title, an 8px dot in the
   corner. It was correct for what could be seen at the time.

   Paysera is not a card. Its option renders a whole PANEL inside
   `__accordion-content`: a country select, fourteen bank tiles and a consent
   paragraph. Measured at 1440 before this block existed, the option box was
   166x1434 inside a 754px column, the panel overflowed 22px OUTSIDE the content
   column, the country select was clipped mid-word ("eikia: Lietu...") and the
   consent text was 10px centred.

   EVERY SELECTOR HERE IS SCOPED TO THE OPTION, NOT THE GROUP, and that is the
   whole design of this block. The first version asked
   `.wc-block-components-radio-control:has(... content *)` - the CONTAINER - and
   an independent review caught what that means: there is one container holding
   every gateway, so the question was really "does ANY gateway have a panel",
   and the answer flipped the layout for all of them. The comment under it
   claimed "add a plain gateway later and nothing here changes"; it was false,
   and a bank transfer or cash-on-delivery added beside Paysera - which
   docs/LAUNCH-NOTES.md still has open - would have lost the card the design
   draws for it.

   Asked per option, both are true at once: Paysera takes a full row, a plain
   gateway keeps its 166px card, and they sit in the same wrapped flex row.

   AND THE QUESTION IS "DOES THE PANEL HOLD CONTROLS", not "does the panel
   exist". Proven by enabling a second gateway on the local site: WooCommerce
   renders `__accordion-content` for the SELECTED option only, and it renders it
   even when the gateway has nothing to put in it - cash on delivery, with no
   description at all, still got an empty content element. Asking whether the
   element exists therefore meant "is this option selected", and a selected
   cash-on-delivery became a 754x50 bar holding one word.

   An input, a select, a button or a radio inside the panel is the real
   difference between a gateway that needs the width and a gateway that has a
   sentence to show. The cost is one frame: Paysera's panel says "Kraunama..."
   before its controls arrive, so the card widens a moment after it is picked. */

.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control
	.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control-accordion-content :is(input, select, button, textarea, [role="radio"])) {
	flex: 1 0 100%;
	align-items: stretch;
	justify-content: flex-start;
	min-height: 0;
	padding: 16px;
	text-align: left;
}

/* The title row goes horizontal, because a full-width card with a centred
   12px title and 700px of white either side reads as a mistake. The 8px dot
   above stays where it is - top-left of the card - so the padding starts clear
   of it. */
.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control-accordion-content :is(input, select, button, textarea, [role="radio"]))
	.wc-block-components-radio-control__option,
.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control-accordion-content :is(input, select, button, textarea, [role="radio"]))
	.wc-block-components-radio-control__option-layout,
.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control-accordion-content :is(input, select, button, textarea, [role="radio"]))
	.wc-block-components-radio-control__label-group {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-left: 12px;
	text-align: left;
}

/* The 10px centred grey above is a CAPTION style - right for a gateway's one
   line of description, ruinous for a panel of controls. A populated accordion
   takes the page's own type back.

   THE SELECTOR IS DELIBERATELY MORE SPECIFIC THAN THE RULE IT BEATS, not merely
   later in the file. `:has()` contributes the specificity of its argument, and
   the first version's argument was `*` - zero - so this tied with the caption
   rule at (0,2,0) and won only on source order. Reordering this file would have
   silently put 10px centred type back under the bank tiles, with nothing to
   fail. Naming the option class in the ancestor chain makes it (0,3,0) and the
   cascade no longer depends on where the block sits. */
.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control-accordion-option
	.wc-block-components-radio-control-accordion-content:has(*) {
	margin-top: 16px;
	padding-left: 12px;
	color: var(--wp--preset--color--text-slate);
	font-size: var(--wp--preset--font-size--base);
	line-height: 22px;
	text-align: left;
}

/* NO `:has()` FALLBACK, AND THAT IS A CHECKED DECISION rather than an
   oversight. Baseline support landed in every current engine in December 2023
   (Chrome 105, Safari 15.4, Firefox 121), so the browsers without it are ones
   that also cannot run WooCommerce's block checkout, which is a React app on
   the same modern baseline. A customer whose browser ignores these rules sees
   the pre-fix layout - cramped, but every control still present and the
   checkout still completable. That is the reason this is acceptable and the
   reason it is written down. */

/* --- Paysera's own panel ------------------------------------------------
   Its stylesheet lays the fourteen banks out as ONE COLUMN of 74px rows, which
   is 1127px of checkout for a control the customer uses once. These are the
   plugin's own class names and nothing here changes its behaviour - the radios,
   the country select and the consent text are all still the plugin's. */

.wp-block-woocommerce-checkout-payment-block .paysera-payment-methods__container {
	width: 100%;
}

.wp-block-woocommerce-checkout-payment-block .paysera-payment-methods__country-select {
	max-width: 280px;
	margin-bottom: 16px;
}

.wp-block-woocommerce-checkout-payment-block div.paysera-radio-control {
	display: grid;
	/* Measured: 165 puts FOUR tiles across the 708px desktop panel and ONE
	   across the 304px a phone leaves, which is the right answer at both ends.
	   One column on a phone is the pattern every bank picker uses and it gives a
	   304x58 tap target; the alternative, forcing two columns at 145px, only
	   buys back scroll by wrapping "LKU Credit Union" onto three lines. */
	grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
	gap: 8px;
}

.wp-block-woocommerce-checkout-payment-block div.paysera-radio-control .radio-control__option {
	min-height: 56px;
	padding: 8px 10px;
}

/* The plugin truncates the bank name on one line, which cut "LKU Credit Union"
   to "LKU Credit Unio" at every width that fits four tiles. A bank the customer
   cannot read the name of is not a choice - so it wraps instead, and the tile
   grows to hold it. */
.wp-block-woocommerce-checkout-payment-block div.paysera-radio-control .radio-control__label {
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
}

.wp-block-woocommerce-checkout-payment-block .paysera-customer-consent__text {
	margin-top: 16px;
	color: var(--wp--preset--color--text-muted);
	font-size: 12px;
	line-height: 18px;
	text-align: left;
}

/* The gateway's own title row - "Visi populiarūs mokėjimo būdai" beside the
   Paysera mark. In a 166px card it wrapped onto three lines. */
.wp-block-woocommerce-checkout-payment-block .paysera-gateway-label__text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-align: left;
}

/* --- The three assurances under the summary (node 1:835) --------------
   A 428px WHITE CARD inside the summary panel: three rows, each a 28px #ebedef
   disc holding a 16px brand-orange glyph, then a Lora 700 12/16 title with
   Inter 400 11/17 under it.

   IT IS A CARD, NOT A HAIRLINE. The first build read node 1:835 as a divider
   with rows under it - the node carries `bg #ffffff` and a 1px #f3f4f6 stroke on
   all four sides, and on the #fcfdfd panel behind it that reads as a nested
   card. Matas: "the checkout page doesnt have the white square behind the
   'saugus apsipirksimas' and other 3 stuff card."

   THE RADIUS IS THE THEME'S, NOT FIGMA'S. The node has no cornerRadius at all,
   yet the design's own render clearly draws rounded corners - the two disagree,
   so this takes --radius--card (12px), which is what every other nested card in
   the file uses. */

.vyt-assure {
	margin: 24px 0 0;
	padding: 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	list-style: none;
}

.vyt-assure__row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.vyt-assure__row + .vyt-assure__row {
	margin-top: 16px;
}

/* node 1:836 - a 28px disc, and the glyph inside it is the BRAND orange while
   the disc is a cool grey. */
.vyt-assure__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 14px;
	background: #ebedef;
}

.vyt-assure__icon .vyt-icon {
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--brand);
}

.vyt-assure__text {
	display: block;
	padding-top: 1px;
}

.vyt-assure__text strong {
	display: block;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
}

.vyt-assure__text span {
	display: block;
	color: var(--wp--preset--color--text-soft);
	font-size: 11px;
	line-height: 17px;
}

/* --- The order summary's product rows (nodes 1:891-1:913) -------------
   64x64 image with a quantity badge on its top-right corner, then the name, the
   weight under it, and the line price hard right. */

/* SQUARE, AND ALWAYS THE SAME SQUARE. WooCommerce sizes the thumbnail from the
   file, so a 400x334 photo came out 64x53 and a portrait one would come out
   taller than it is wide - three rows, three different rectangles. The box is
   fixed and the picture is cropped into it. Matas: "the images ... are
   rectangles and not squares from the design". */
/* THE FIRST SELECTOR CARRIES THE PLUGIN'S TWO CLASSES, not one. checkout.css
   writes `.wc-block-components-order-summary .wc-block-components-order-summary-item__image`
   and a one-class rule here lost on margin - the picture kept its 8px drop and
   sat below the name it belongs to. Verified in document.styleSheets. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__image,
.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img,
.wc-block-cart-item__image img {
	/* margin 0: WooCommerce drops the picture 8px, which with the row aligned to
	   its top put the product name ABOVE the picture it names. Node 1:896 starts
	   the picture at the row top and node 1:894 puts the name 13px down. */
	width: 64px;
	min-width: 64px;
	height: 64px;
	margin-top: 0;
	border-radius: 10px;
}

/* 100%, NOT 64px. The wrapper is the 64px box; the picture fills it. An explicit
   height on the <img> is what the plugin and the browser's own `img { height:
   auto }` keep arguing over, and a 400x334 photo kept winning at 64x53 - a
   square hole with the picture sitting in the top of it. A percentage of a
   parent that already has a fixed height ends that argument. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img,
.wc-block-cart-item__image img {
	display: block;
	height: 100%;
	object-fit: cover;
}

/* node 1:898 - a 16px disc in the brand orange on the image's top-right corner,
   with the count in white. It was WHITE ON WHITE, and had been "fixed" twice
   before without ever being looked at: WooCommerce sets `background: currentcolor`
   from `.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity`,
   two classes, so both earlier one-class rules lost and the badge stayed a white
   disc with white digits on it. The plugin's own selector shape is what wins,
   and this is now the ONLY rule for it - there were three. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	/* transform: none and min-height, both of them the plugin's. It translates
	   the badge (50%, -50%) so half of it hangs outside the picture's corner, and
	   its min-height of 20 beat a plain height of 16 - so the badge was an oval
	   sitting off the top-right edge. Node 1:898 is a 16px disc INSIDE the
	   corner, 2px in from each side. */
	top: 2px;
	right: 2px;
	left: auto;
	display: grid;
	place-items: center;
	width: 16px;
	min-width: 16px;
	height: 16px;
	min-height: 16px;
	padding: 0;
	transform: none;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--brand);
	box-shadow: none;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

/* THE PRICE IS PRINTED TWICE by the plugin - once under the name as the unit
   price and once on the right as the line total. The design shows one, on the
   right. Hiding the unit price is also what makes room for the weight. */
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__description .wc-block-cart-item__prices {
	display: none;
}

/* The short description is not in the design and is a paragraph of prose in a
   64px row; the weight line that replaces it is added by
   `vytintas_cart_item_weight()`. */
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description {
	display: none;
}

/* NOT SCOPED TO THE CHECKOUT SUMMARY ANY MORE. The same weight line is printed
   on the CART, where nothing was hiding the label - so that page read
   "vyt-weight: ~200 g", the raw meta key, straight out of the Store API. Two
   pages, one line, one rule. */
.wc-block-components-product-details__vyt-weight {
	margin: 0;
	color: var(--wp--preset--color--text-faint);
	font-size: 11px;
	line-height: 17px;
}

.wc-block-components-product-details__vyt-weight .wc-block-components-product-details__name {
	display: none;
}

.wc-block-components-order-summary-item__total-price .wc-block-components-product-price {
	color: var(--wp--preset--color--ink);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}

/* --- The coupon panel, cart and checkout ------------------------------
   The design draws no coupon UI at all, so this is the theme's own answer for a
   control WooCommerce insists on: the same field treatment as every other input
   on the page, and a button that is the same height as the field beside it
   rather than 11px taller. */

.wc-block-components-totals-coupon__form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.wc-block-components-totals-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
}

/* `.wc-block-components-button:not(.is-link)` sets `height: auto` and is one
   class plus a pseudo-class, so a single-class rule here lost and the button came
   out 46px beside a 41px field. The plugin's own shape, plus our class. */
.wc-block-components-totals-coupon__button.wc-block-components-button:not(.is-link) {
	flex: 0 0 auto;
	height: 41px;
	min-height: 41px;
	padding-block: 0;
	padding-inline: 20px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.wc-block-components-totals-coupon__button .wc-block-components-button__text {
	display: block;
	line-height: 20px;
}

/* The row that opens it. WooCommerce puts its chevron in the far corner with
   `position: absolute`, which is fine; the label just needed the page's type. */
.wc-block-components-panel__button {
	padding-block: 0;
	color: var(--wp--preset--color--ink-slate);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

/* --- The site's own validation messages (assets/js/forms.js) -----------
   `required` and `type="email"` make the BROWSER complain, in a bubble drawn in
   the platform's font and often in the platform's LANGUAGE - Chrome says
   "Please fill out this field" on a Lithuanian page. The script sets novalidate
   and puts the message here instead. Server-side validation is unchanged and is
   still what actually decides. */

.vyt-field__error {
	display: block;
	margin-top: 8px;
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 16px;
}

/* The field itself is marked by `aria-invalid`, which the script sets on the
   control rather than on a wrapper - the footer's newsletter input has no
   wrapper of its own, so a wrapper-only rule would leave it unmarked. */
.vyt-form [aria-invalid="true"],
.vyt-newsletter [aria-invalid="true"],
.has-error .vyt-menu__button {
	border-color: var(--wp--preset--color--brand);
}

/* The newsletter input has no wrapper of its own, so the message gets a slot of
   its own under the row rather than inside the pill. */
.vyt-newsletter__field:empty {
	display: none;
}

.vyt-newsletter {
	flex-wrap: wrap;
}

.vyt-newsletter__field {
	flex: 1 0 100%;
}

/* --- The site's own dropdown (assets/js/select.js) ----------------------
   A <select> opens the OPERATING SYSTEM's menu, which no stylesheet can reach.
   The script builds a listbox from the same options and hides the select;
   `.is-enhanced` is set by that script, so with JavaScript off none of this
   applies and the native control is still there and still works.

   Two callers: the shop's sort pill (node 1:426) and the contact form's subject
   field (node 1:1864). Everything shared lives here; the sizing that differs
   lives with each of them. */

.vyt-menu {
	position: relative;
}

.vyt-menu.is-enhanced > select {
	display: none;
}

.vyt-menu__button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	line-height: 22px;
	text-align: left;
	cursor: pointer;
}

.vyt-menu__value {
	flex: 1;
	overflow: hidden;
	color: var(--wp--preset--color--ink-slate-soft);
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Nothing chosen yet: the value slot is showing the placeholder option, so it
   reads like a placeholder rather than like an answer. */
.vyt-menu.is-placeholder .vyt-menu__value {
	color: var(--wp--preset--color--text-faint);
	font-weight: 400;
}

/* NOT IN THE DESIGN, and asked for anyway: with the native arrow gone there was
   nothing left saying the control opens. Same glyph as the filter panels,
   pointing the other way, so the controls on a page read as one family. */
.vyt-menu__button .vyt-icon {
	flex: none;
	width: 10px;
	transform: rotate(180deg);
	transition: transform var(--wp--custom--transition);
}

.vyt-menu.is-open .vyt-menu__button .vyt-icon {
	transform: rotate(0deg);
}

/* NOT ORANGE. The brand ring belongs on things that submit; on a control that
   only opens a menu it reads as an error state, which is what it looked like. */
.vyt-menu__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--text-slate);
	outline-offset: 2px;
}

.vyt-menu__list {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	max-height: 260px;
	margin: 0;
	padding: 8px;
	overflow-y: auto;
	border: 1px solid var(--wp--preset--color--line-warm);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 12px 28px rgba(17, 24, 39, 0.12);
	list-style: none;
}

.vyt-menu__option {
	padding: 8px 12px;
	border-radius: 10px;
	color: var(--wp--preset--color--text-slate-mid);
	font-size: var(--wp--preset--font-size--base);
	line-height: 22px;
	cursor: pointer;
}

.vyt-menu__option.is-placeholder {
	color: var(--wp--preset--color--text-faint);
}

.vyt-menu__option:hover,
.vyt-menu__option.is-active {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-slate-soft);
}

.vyt-menu__option:focus-visible {
	outline: 2px solid var(--wp--preset--color--text-slate);
	outline-offset: -2px;
}

.vyt-menu__option[aria-selected="true"] {
	color: var(--wp--preset--color--ink-slate-soft);
	font-weight: 500;
}

/* The shop's sort pill is the whole 306x34 control, so its button carries the
   pill's padding and the pill itself gives up its own. */
.vyt-shop__sort .vyt-menu {
	flex: 1;
	height: 100%;
}

.vyt-shop__sort:has(.vyt-menu.is-enhanced) {
	padding: 0;
}

.vyt-shop__sort .vyt-menu__button {
	padding: 0 16px;
	border-radius: var(--wp--custom--radius--panel);
}

/* THE BOX WAS ON THE <select>, and the select is now hidden - so the subject
   field lost its border, its fill and its height while the two inputs beside it
   kept theirs. The button takes over the same box. */
.vyt-field--select .vyt-menu__button {
	height: 45px;
	padding: 0 16px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fcfbf9;
	color: var(--wp--preset--color--ink-slate);
	font-weight: 400;
}

.vyt-field--select .vyt-menu__value {
	color: inherit;
	font-weight: inherit;
}

.vyt-field--select .vyt-menu__list {
	top: calc(100% + 4px);
}


/* --- Product page (node 1:2) -------------------------------------------
   Gallery 618 at x=64, summary 632 at x=744, 62px between them. This page
   uses a THIRD neutral ramp - zinc (#262626, #737373, #A3A3A3) - alongside
   the shop's slate and the home page's grey. All three are tokens because
   the design uses each one consistently within its own page. */

.vyt-product {
	padding-block: 24px 40px;
}

/* nodes 1:3 - 1:9 - Inter 400 11/17 #A3A3A3.

   ONLY THE THREE ">" SEPARATORS (1:4, 1:6, 1:8) are Plus Jakarta Sans; every
   word between them is Inter. Not worth a span each, so the trail stays Inter.

   THE SIZE IS NOT SET HERE. WooCommerce's breadcrumbs block defaults itself to
   `has-small-font-size`, and WordPress prints core preset classes with
   !important, so no rule in this file can win. The fix is to stop it emitting
   that class: templates/single-product.html asks the block for fontSize "xs",
   which is this theme's 11px. Setting it in CSS would have meant !important. */
.vyt-breadcrumbs {
	margin: 0 0 32px;
	color: var(--wp--preset--color--text-slate);
	line-height: 17px;
}

.vyt-breadcrumbs a {
	color: var(--wp--preset--color--text-slate);
	text-decoration: none;
}

/* The chevron is Plus Jakarta Sans in the design where the crumbs are Inter -
   a different glyph, not a different size - with 8px of air either side. */
.vyt-breadcrumbs__sep {
	margin-inline: 8px;
	font-family: var(--wp--preset--font-family--ui);
}

.vyt-product__grid {
	display: grid;
	/*
	 * minmax(0, Npx) - the design's width as a CEILING, not a floor. These tracks
	 * add up to the 1312px band, which only exists at 1440 and above; as plain
	 * fixed widths they demanded 1312 of a 1152px column at 1280 and pushed the
	 * document 96px wider than the viewport. A minmax track measures exactly N
	 * where there is room and shrinks proportionally where there is not.
	 */
	grid-template-columns: minmax(0, 618px) minmax(0, 632px);
	gap: 64px;
	align-items: start;
}

/*
 * node 1:291 - 618 x 443, AND THE HEIGHT IS THE CONTAINER'S, NOT THE IMAGE'S.
 *
 * Matas, review: "Images need to make sure that they dont make up the container
 * size, the container size should be universal and the images should fit into it
 * rather than stretch the container up to fit."
 *
 * The frame is fixed at the design's ratio and the photo is cropped into it, so
 * the page has the same shape whatever lands in the media library - the client's
 * real photography will not move everything below it.
 *
 * These are the THEME's classes now. The gallery no longer goes through
 * WooCommerce (see blocks/product-gallery/render.php), so there is no
 * .woocommerce-product-gallery wrapper carrying an inline opacity of 0.
 */
.vyt-product__gallery-main {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	aspect-ratio: 618 / 443;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--line-warm);
}

.vyt-product__gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* nodes 1:273-1:281 - 64x64 thumbnails on a 12px gap, 28px under the frame */
/* CENTRED under the frame. Nodes 1:273-1:281 run 189..557 beneath an image that
   spans 64..682 - both centre on 373. The build left-aligned them to the image's
   left edge. */
.vyt-product__gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.vyt-product__gallery-thumb {
	appearance: none;
	display: block;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 12px;
	background: none;
	cursor: pointer;
	transition: border-color var(--wp--custom--transition);
}

.vyt-product__gallery-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	object-fit: cover;
}

/*
 * NO RING ON THE SELECTED THUMBNAIL. The design draws none (nodes 1:273-1:281 are
 * plain 64px frames), and a visual pass flagged the orange ring as an addition -
 * correctly. It survives only on HOVER and FOCUS, where the design is silent and
 * a pointer affordance is not an invention.
 */
.vyt-product__gallery-thumb:hover {
	border-color: var(--wp--preset--color--brand);
}

.vyt-product__gallery-thumb.is-active {
	border-color: transparent;
}

.vyt-product__gallery-thumb:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* node 1:209 - 70 x 23, its label (1:210) Plus Jakarta Sans 600 10/15 */
.vyt-product__badge {
	display: inline-flex;
	align-items: center;
	height: 23px;
	padding-inline: 12px;
	border-radius: 12px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 15px;
}

/* node 1:211 - Lora 700 30/36, -0.75px, #1E293B */
.vyt-product__title {
	margin: 12px 0 0;
	color: var(--wp--preset--color--ink-slate);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 30px;
	font-weight: 700;
	line-height: 36px;
	letter-spacing: -0.75px;
}

/* node 1:212 */
.vyt-product__lead {
	margin: 12px 0 0;
	max-width: 550px;
	color: var(--wp--preset--color--text-slate-mid);
	font-size: var(--wp--preset--font-size--base);
	line-height: 20px;
}

.vyt-product__lead p {
	margin: 0;
}

/* node 1:213 - one bold price with a lighter "/ kg" beside it.

   The design's own suffix said "/ kg" over pills priced per PACK, which could
   not both be true (Q15). Matas confirmed the prices are per pack, so the
   suffix now carries the REAL per-kilogram figure for whichever weight is
   chosen - the design's composition, with the contradiction removed. Before a
   weight is picked the headline reads "nuo 6,50 €" rather than a range, and
   the unit line stays hidden because there is nothing true to put in it. */
.vyt-product__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin: 24px 0 0;
	color: var(--wp--preset--color--ink-slate);
	/*
	 * LORA 27/32, NOT INTER 20. This is the headline price and the design sets it
	 * in the heading face (node 1:213); Inter 700 20 is what node 39:435 uses for
	 * the price on a PRODUCT CARD further down the same page, and the card's
	 * treatment had been applied to the headline. 27px is not on the type ramp -
	 * it is used once, here, so it stays a literal rather than becoming a token
	 * with one caller.
	 */
	font-family: var(--wp--preset--font-family--heading);
	font-size: 27px;
	font-weight: 700;
	line-height: 32px;
}

/* node 1:214 - the suffix is 12/16 and a step down in weight and colour, so it
   reads as a qualifier rather than a second price. */
.vyt-product__price-unit {
	color: var(--wp--preset--color--text-zinc);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 16px;
}

.vyt-product__price-unit[hidden] {
	display: none;
}

/* WooCommerce prints the chosen variation's price a SECOND time, inside its own
   form and directly above the quantity box. The design has one price, at the
   top (node 1:213), and the headline above already updates with the weight - so
   this was the same number twice, the second one floating with nothing around
   it. Matas: "i see the price appearing above the counter... looks out of
   place."

   Hidden rather than removed: WooCommerce writes the availability and the
   variation description into the same container, and those still need to be
   able to appear. */
.woocommerce-variation-price {
	display: none;
}

/* node 1:215 - a full-width rule under the price */
/*
 * THE RULE IS ABOVE THE CAPTION, NOT BELOW IT. Node 1:215 draws the hairline at
 * y=351 and node 1:216 puts "Pasirinkite kiekį" at y=376 - price, rule, caption,
 * pills. The border lived on this wrapper, which comes AFTER the caption in the
 * markup, so the build read price, caption, rule, pills. It measured correctly
 * on every element and had two of them the wrong way round; an independent
 * visual pass is what noticed.
 */
.vyt-product__form {
	margin-top: 0;
	padding-top: 0;
}

/* WooCommerce's own select stays in the DOM and keeps owning the choice; the
   pills above it are what the design draws. Hiding it rather than removing it
   is what keeps the form working when JavaScript does not run. */
.vyt-product__form .variations {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vyt-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}

/* node 1:217 - 38px tall, radius 20, #F54C2D when chosen.

   CORRECTED 2026-08-26. This was built in Inter on the reading that Plus Jakarta
   Sans appeared on this ONE element and was a slip (Q16). Counting every text
   node in the file rather than one of them: it is 27 nodes across three pages,
   and it is the file's UI LABEL face. The family is now loaded and used where
   the design uses it. */
/*
 * BOTH STATES ARE FILLED. Nodes 1:217 / 1:219 / 1:221 read #f54c2d for the chosen
 * weight and #1e293b for the others, with WHITE Plus Jakarta Sans 500 12 on all
 * three. This was built as a white outlined chip with dark text for the resting
 * state - a different component entirely, and the reason a visual pass called the
 * weight selector "the wrong component" rather than a colour mismatch.
 *
 * Read off the node fills, not off the render: at pill size the navy reads as a
 * mid-grey and it is easy to see it as an outline.
 */
.vyt-pill {
	height: 38px;
	padding-inline: 24px;
	border: 1px solid transparent;
	border-radius: 20px;
	background: #1e293b;
	color: #fff;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 20px;
	cursor: pointer;
	transition: background var(--wp--custom--transition), color var(--wp--custom--transition);
}

.vyt-pill:hover {
	background: #2b3a4f;
}

.vyt-pill.is-selected {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
	color: #fff;
}

/* node 1:224 - a 110x38 pill holding minus / value / plus, and node 1:242 - the
   496px outlined button beside it.

   THIS IS THE ONE RULE FOR THE PILL. An earlier pass added a second `.vyt-qty`
   block further down the file; at one class it lost to this two-class selector
   however late it sat, so the border stayed line-warm instead of the design's
   #e5e5e5 and it read as a cache problem rather than a specificity one. */
.vyt-product__form .quantity {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 110px;
	height: 38px;
	margin: 0;
	padding-inline: 12px;
	border: 1px solid #e5e5e5;
	border-radius: 20px;
	background: #fff;
}

/* node 1:232 - Inter 700 12/16, centred. The browser's spinner is removed
   because the design's control is the two buttons, not a pair of tiny arrows. */
.vyt-product__form .quantity input.qty {
	width: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.vyt-product__form .quantity input.qty::-webkit-outer-spin-button,
.vyt-product__form .quantity input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.vyt-product__form .quantity input.qty:focus-visible {
	outline: none;
}

/* nodes 1:225 / 1:233 - 14x14 hit areas around 9px glyphs. The button is
   deliberately bigger than what it draws: a 9px tap target is not a tap target. */
.vyt-product__form .vyt-qty__step {
	appearance: none;
	display: grid;
	place-items: center;
	width: 14px;
	height: 14px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: opacity var(--wp--custom--transition);
}

.vyt-product__form .vyt-qty__step:hover {
	opacity: 0.65;
}

.vyt-product__form .vyt-qty__step:focus-visible {
	outline: 2px solid #f54c2d;
	outline-offset: 3px;
	border-radius: 2px;
}

.vyt-product__form .vyt-qty__step .vyt-icon {
	display: block;
	width: 9px;
	height: auto;
}

/* The pill and the button share one row 26px apart (the pill ends at x=854 and
   the button starts at 880). BOTH containers are listed: a simple product puts
   them straight in form.cart, a variable one nests them in the variation box,
   and styling only the form left the pair 4px apart on every variable product -
   which is every product this shop actually sells. */
.vyt-product__form form.cart:not(.variations_form),
.vyt-product__form .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

/* NOT the variations form itself. It also carries .cart, but it holds the weight
   selector AND the variation wrapper, so making it a flex row turned the wrapper
   into a content-width item and threw the pill and button to x=1065 - off the
   column entirely. The row that needs to be a row is the one INSIDE it. */
.vyt-product__form .single_variation_wrap {
	width: 100%;
}

/* WooCommerce's own sheet puts a 4px right margin on .quantity and outranks a
   two-class selector, so the pill and the button sat 30px apart instead of 26
   and the button started at 884 rather than the design's 880. Three classes
   settles it - it is the plugin's margin that has to lose, not the design's gap
   that gets fudged to 22 to hide it.

   THREE CLASSES WAS NOT ENOUGH EITHER. The plugin's selector is
   `.woocommerce div.product form.cart .quantity` - four classes and an element,
   so it kept winning and the button stayed at 884. Matching its shape is the
   fix; !important would have worked too and would have hidden why. */
.woocommerce div.product .vyt-product__form .quantity.vyt-qty,
.vyt-product__form .quantity.vyt-qty {
	margin: 0;
}

/*
 * node 1:243 - a 16x16 shopping bag, 9px before the label, in the LABEL'S OWN
 * colour (#1e293b), not the brand orange.
 *
 * THE ICON WAS INVISIBLE. This rule was declared twice: a second copy further
 * down set `background: url(cart-add.svg)` at 13x15. A `background` shorthand
 * does not reset a MASK, so the survivor's cart-add image was still being cut
 * out by this rule's shopping-bag silhouette - two different glyphs, so where
 * they did not overlap nothing painted, and the button shipped with no icon at
 * all. The duplicate is gone; this is the only rule now.
 *
 * `currentColor` rather than a token, so the glyph turns white with the label on
 * hover without a second rule that can fall out of step with the first.
 */
.vyt-product__form .single_add_to_cart_button::before {
	content: "";
	/* Explicit, so the box exists even if something makes the button non-flex
	   again - an inline pseudo ignores width and height entirely. */
	display: block;
	width: 16px;
	height: 16px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/shopping-bag-sm.svg") center / contain no-repeat;
	mask: url("assets/icons/shopping-bag-sm.svg") center / contain no-repeat;
}

/* The base rule above had to out-specify WooCommerce, so this one has to match
   it or the button stops reacting to a pointer. The icon follows for free -
   it is painted in `currentColor`. */
.vyt-product__form .single_add_to_cart_button:hover,
.woocommerce div.product .vyt-product__form form.cart button.single_add_to_cart_button:hover {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
}



/* node 1:253 - 632 x 87, #F8F7F4, radius 20 */
.vyt-product__notice {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: 16px;
	margin-top: 36px;
	padding: 16px 20px 20px;
	border: 1px solid rgba(245, 245, 245, 0.8);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--surface-warm);
}

.vyt-product__notice .vyt-icon {
	margin-top: 3px;
}

.vyt-product__notice strong {
	display: block;
	margin-bottom: 3px;
	color: var(--wp--preset--color--ink-zinc);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 16px;
}

.vyt-product__notice p {
	margin: 0;
	max-width: 497px;
	color: var(--wp--preset--color--text-zinc);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 17px;
}

/* node 1:345 - the tab row: 30px tall over a hairline, active in #F54C2D with
   its own 2px rule; the others Inter Medium 12/20 #737373. */
.vyt-product__tabs {
	margin-top: 48px;
}

.vyt-product__tabs .wc-tabs,
.vyt-product__tabs ul.tabs {
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0 0 0 48px;
	border-bottom: 1px solid var(--wp--preset--color--line-warm);
	list-style: none;
}

.vyt-product__tabs ul.tabs li {
	margin: 0;
	padding: 0;
}

.vyt-product__tabs ul.tabs li a {
	display: block;
	padding: 3px 0 12px;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--text-zinc);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
}

.vyt-product__tabs ul.tabs li.active a {
	border-bottom-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
	font-weight: 700;
}

.vyt-product__tabs .woocommerce-Tabs-panel {
	padding: 32px 48px;
	color: var(--wp--preset--color--text-slate-mid);
	font-size: var(--wp--preset--font-size--base);
	line-height: 20px;
}

/* --- Page hero (node 1:2018) -------------------------------------------
   Used by Kontaktai and by the other inner pages: a 48/68 heading and lead on
   the left, a 759x240 photo on the right, over a full-width hairline. */

/*
 * 117px UNDER THE HEADER. Node 39:1033 puts the hero container at y=166 and its
 * heading (1:2020) at y=195, against a header that ends at 77 - so the heading
 * sits 118px below the header. The build left 41 and the whole hero rode 76px
 * high.
 *
 * A visual pass caught it. Nothing here measures the gap BETWEEN two sections -
 * the sweep checks where each band starts horizontally, and verify matches
 * elements to elements, so a section that is entirely present and entirely too
 * high passes both.
 */
.vyt-page-hero {
	min-height: 419px;
	padding-block: 116px 88px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.vyt-page-hero__inner {
	display: grid;
	grid-template-columns: 473px minmax(0, 1fr);
	gap: 80px;
	align-items: start;
}

.vyt-page-hero__title {
	margin: 0 0 24px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 48px;
	font-weight: 700;
	line-height: 68px;
	letter-spacing: -1px;
}

.vyt-page-hero__lead {
	margin: 0;
	max-width: 376px;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 29px;
}

/* node 39:1030 - 759 x 240, radius 31, sitting 29px above the heading */
.vyt-page-hero__media {
	margin: -29px 0 0;
	border-radius: var(--wp--custom--radius--media);
	overflow: hidden;
	aspect-ratio: 759 / 240;
}

.vyt-page-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--wp--custom--radius--media);
	object-fit: cover;
}

/* --- Contact cards (node 1:1804) ---------------------------------------
   Four 308 x 256 cards on a 27px gap. */

.vyt-contact-cards {
	padding-block: 48px;
}

.vyt-contact-cards__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}

/* 23px, not 24: the design's coordinates are measured from the card's outer
   edge and this card has a 1px border. Same arithmetic as the shop card. */
.vyt-contact-card {
	min-height: 256px;
	padding: 24px;
	border: 1px solid rgba(243, 244, 246, 0.8);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
}

/* node 1:1806 - a 48px #F2F5F2 disc holding a 20px orange glyph */
.vyt-contact-card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	background: #f2f5f2;
}

/* node 1:1812 - Lora 700 18/28 #1E293B */
.vyt-contact-card h2 {
	margin: 20px 0 0;
	color: var(--wp--preset--color--ink-slate);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	line-height: 28px;
}

/* node 1:1813 - Inter 600 18/28 */
.vyt-contact-card__value {
	margin: 8px 0 0;
	color: var(--wp--preset--color--ink-slate);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	line-height: 28px;
}

.vyt-contact-card__value a {
	color: inherit;
	text-decoration: none;
}

.vyt-contact-card__value--email {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 24px;
}

/* 14px, but still semibold like the other three values - the engine reads the
   design's heaviest run on this node as 600. */
.vyt-contact-card__value--small {
	font-size: var(--wp--preset--font-size--base);
	line-height: 20px;
}

/* node 1:1814 - Inter 500 12/16 #6B7280 */
.vyt-contact-card__note {
	margin: 12px 0 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 16px;
}

/* node 1:1859-1:1862 - the registry block, Inter 400 on a 20px rhythm */
.vyt-contact-card__registry {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
}

.vyt-contact-card__registry li:first-child {
	color: var(--wp--preset--color--ink-slate);
	font-weight: 600;
}

/* --- Contact page body (node 1:1863) ----------------------------------
   Two 639px columns, 34px apart: the form on the left, the map on the right.
   The map column is not built yet. */

/* No bottom padding: node 1:1863 draws 32px under the two cards, but the follow
   band (1:2029) starts at the cards' bottom edge and overlaps it, so the gap a
   reader actually sees is that band's own 54px top inset. Padding both would
   push everything below down by 64. */
.vyt-contact-body {
	padding-block: 32px 0;
}

.vyt-contact-body__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 639px));
	gap: 32px;
	align-items: start;
}

/* --- Contact form card (node 1:1864) -----------------------------------
   639 x 630, white, 1px #F3F4F6, radius 16, with a barely-there shadow. The
   fields are #FCFBF9 on a 1px #E5E7EB edge - warmer than white, which is what
   separates them from the card they sit on. */

/* Padding accounts for the 1px border and for the design's asymmetric inset:
   fields run x=40 to x=598 inside a 639px card, so 40 left and 41 right. */
.vyt-form-card {
	padding: 40px 40px 40px 40px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 0 1px rgba(23, 26, 31, 0.12);
}

.vyt-form-card__title {
	margin: 0;
	color: var(--wp--preset--color--ink-slate);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: 700;
	line-height: 32px;
}

.vyt-form-card__lead {
	margin: 8px 0 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--base);
	line-height: 20px;
}

.vyt-form {
	margin-top: 32px;
}

.vyt-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

/* 17px between a field's bottom edge and the next label - the design's rhythm
   (row one ends at 203, Tema's label starts at 220). */
.vyt-field {
	margin: 0 0 16px;
}

.vyt-form__row .vyt-field {
	margin-bottom: 0;
}

/* node 1:1878 - Inter 600 12/20 #1E293B, 6px above its field */
.vyt-field label {
	display: block;
	margin-bottom: 8px;
	color: var(--wp--preset--color--ink-slate);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 20px;
}

/* node 1:1879 - 45px tall, #FCFBF9, 1px #E5E7EB, radius 10 */
/* Fixed 45px rather than a min-height: padding plus a 22px line plus the 1px
   border came to 46, and one extra pixel per field pushed the submit button
   29px down the card by the time it accumulated. */
.vyt-field input,
.vyt-field select,
.vyt-field textarea {
	width: 100%;
	height: 45px;
	padding: 0 16px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fcfbf9;
	color: var(--wp--preset--color--ink-slate);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	line-height: 22px;
}

.vyt-field textarea {
	/* MIN-HEIGHT, NOT HEIGHT. 108px is the design's box (node 1:1902), but a
	   fixed height clips: the contact form's own placeholder needs 114px at
	   360px wide, so the last line sat under the border. Found 2026-09-13, the
	   first time the audit's declared-height check actually ran - it had been
	   walking document.styleSheets with `if ( r.cssRules )`, which is truthy on
	   every style rule under CSS nesting, so it read nothing and reported every
	   page clean. */
	min-height: 108px;
	padding: 12px 16px;
	resize: vertical;
}

.vyt-field ::placeholder {
	color: var(--wp--preset--color--text-soft);
}

/* node 1:1902 - the select carries its own chevron rather than the platform's */
.vyt-field--select select {
	appearance: none;
	padding-right: 40px;
	background-image: url("assets/icons/chevron-down.svg");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

.vyt-form__row + .vyt-field {
	margin-top: 16px;
}

/* node 1:1889 - 163 x 44, radius 20 */
.vyt-form__submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	/* The message field's own 17px bottom margin already supplies most of the
	   28px the design leaves above this button. */
	margin-top: 12px;
	padding-inline: 24px;
	border: 0;
	border-radius: 20px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 22px;
	cursor: pointer;
}

/* node 1:1865 - a hairline, then the reassurance line */
/* node 1:1866 - the rule above the privacy note is 518px wide starting at x=105,
   so it stops well short of the field column's right edge. The build ran it the
   full 558px of the card. */
.vyt-form__privacy {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 518px;
	margin: 32px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--text-faint);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 16px;
}

/* The honeypot has to be reachable by a bot parsing the HTML and invisible to
   a person - display:none would be skipped by the naive bots this catches. */
.vyt-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vyt-form-notice {
	margin: 20px 0 0;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--base);
	line-height: 20px;
}

.vyt-form-notice--ok {
	background: #f2f5f2;
	color: var(--wp--preset--color--ink-slate);
}

.vyt-form-notice--error {
	background: rgba(245, 76, 45, 0.08);
	color: var(--wp--preset--color--brand);
}

/* --- Kontaktai page background (node 1:1803) ---------------------------
   The Kontaktai frame is #FAF9F6, not white. Only the hero band sits on white
   (1:2018); everything from the contact cards down to the CTA is the warm
   ground, and the footer then steps to #F5F5F3. Painting each band rather than
   the page keeps the other six pages white. */

.vyt-contact-cards,
.vyt-contact-body,
.vyt-follow,
.vyt-wholesale,
.vyt-cta--plain {
	background: #faf9f6;
}

/* --- Map card (node 1:1907) --------------------------------------------
   639 x 630 beside the form: heading, address, the map picture, then a
   "Žiūrėti maršrutą" row under a hairline. Padding is 40 with a 1px border,
   which is the design's 41px inset measured from the card's outer edge. */

.vyt-map-card {
	min-height: 630px;
	padding: 40px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	/* Node 1:1907 carries the same barely-there drop shadow as the form card it
	   sits beside (1:1864), so the two match each other as well as the file. */
	box-shadow: 0 0 1px rgba(23, 26, 31, 0.12);
}

/* node 1:1927 - Lora 700 24/32 #1E293B */
.vyt-map-card__title {
	margin: 0;
	color: var(--wp--preset--color--ink-slate);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
}

/* node 1:1928 - Inter 400 14/20 #6B7280 */
.vyt-map-card__address {
	margin: 8px 0 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--base);
	line-height: 20px;
}

/* node 1:1929 - 557 x 322, radius 16, 1px #E5E7EB. The picture inside is drawn
   larger than the frame and cropped by it, so the img covers rather than fits. */
.vyt-map-card__media {
	margin: 24px 0 0;
	overflow: hidden;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	aspect-ratio: 557 / 322;
}

.vyt-map-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* node 1:1908 - the hairline sits 76px under the map. The design draws the rule
   518px wide inside a 557px column, stopping 39px short on the right only; that
   reads as a hand-drawn line rather than an intention, so it runs the full
   content width here. */
.vyt-map-card__route {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 76px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--line);
	text-decoration: none;
}

/* node 1:1910 - a 32px #F2F5F2 disc holding the 16px orange compass */
.vyt-map-card__route-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	background: #f2f5f2;
}

.vyt-map-card__route-text {
	display: block;
}

/* node 1:1918 - Inter 500 12/16 #6B7280 */
.vyt-map-card__route-label {
	display: block;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 16px;
}

/* node 1:1926 - Inter 600 14/20 #1E293B, with the 14px #2D4731 arrow inline
   after it rather than pushed to the far edge. */
.vyt-map-card__route-cta {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-top: 3px;
	color: var(--wp--preset--color--ink-slate);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 20px;
}

.vyt-map-card__route-cta .vyt-icon {
	width: 14px;
	height: 14px;
}

/* --- Follow band (node 1:2029) -----------------------------------------
   Centred heading, one line of copy, then three 44px orange discs. */

.vyt-follow {
	padding-block: 56px 72px;
}

.vyt-follow__inner {
	text-align: center;
}

/* node 1:2030 - Lora 700 28/32 #1E293B */
.vyt-follow__title {
	margin: 0;
	color: var(--wp--preset--color--ink-slate);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 28px;
	font-weight: 700;
	line-height: 32px;
}

/* node 1:2031 - Inter 400 14/20 #6B7280. The design draws this on ONE line in a
   441px box; the browser shapes the same string at 444.4px, so a literal 441
   wraps it. 448 keeps the single line the design intends and still wraps on a
   narrow screen, which is what the measure is actually for. */
.vyt-follow__lead {
	margin: 16px auto 0;
	max-width: 448px;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--base);
	line-height: 20px;
}

/* node 39:1039 - three 44px discs, 16px apart */
.vyt-follow__links {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.vyt-follow__link {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 22px;
	background: var(--wp--preset--color--brand);
}

.vyt-follow__link .vyt-icon {
	width: 20px;
	height: 20px;
}

/* --- Wholesale band (node 39:1041) -------------------------------------
   1312 x 194 card that touches the bands above and below it - the design draws
   no gap, so this section carries no vertical padding of its own. */

.vyt-wholesale__card {
	display: flex;
	align-items: center;
	min-height: 194px;
	padding: 0 124px 0 56px;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	background: #f0ede6;
}

/* node 39:1042 - the brand mark in a 93px white disc */
.vyt-wholesale__mark {
	display: grid;
	flex: none;
	place-items: center;
	width: 93px;
	height: 93px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
}

.vyt-wholesale__mark .vyt-icon {
	width: 55px;
	height: 39px;
}

.vyt-wholesale__text {
	margin-left: 40px;
}

/* node 39:1044 - Lora 700 30/30 #111827 */
.vyt-wholesale__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 30px;
	font-weight: 700;
	line-height: 30px;
}

/* node 39:1045 - Inter 400 14/22 #4B5563 */
.vyt-wholesale__lead {
	margin: 24px 0 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--base);
	line-height: 22px;
}

.vyt-wholesale__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: auto;
}

/* node 39:1046 - 218 x 42, radius 21, 1px #2D4731 on white. #2D4731 is a dark
   green that appears nowhere else in the palette; it is this band's own accent
   and the arrow beside the label is the same colour. */
.vyt-wholesale__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 218px;
	height: 42px;
	border: 1px solid #2d4731;
	border-radius: 21px;
	background: var(--wp--preset--color--base);
	color: #2d4731;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
}

.vyt-wholesale__button .vyt-icon {
	width: 14px;
	height: 14px;
}

/* node 39:1055 - Inter 400 11/18 #6B7280, but the address inside it is its own
   run: Inter 600 #374151. One text node in Figma, two styles - which only the
   node's character overrides show, never the screenshot. */
.vyt-wholesale__mail {
	margin: 8px 0 0;
	color: var(--wp--preset--color--text-soft);
	font-size: 11px;
	line-height: 18px;
}

.vyt-wholesale__mail a {
	color: var(--wp--preset--color--text);
	font-weight: 600;
	text-decoration: none;
}

/* --- Shop call to action, unpanelled (node 1:1931) ---------------------
   Kontaktai's version of the same band: no panel, a 1148px column inside the
   1440px frame - a 146px gutter rather than the site's 64 - and a heading and
   button both a step larger than the home page's. */

.vyt-cta--plain {
	padding-block: 48px;
}

.vyt-cta--plain .vyt-cta__panel {
	width: min(100% - 48px, 1148px);
	min-height: 48px;
	margin-inline: auto;
	padding: 0;
	border-radius: 0;
	background: none;
}

/* node 1:1932 - Lora 700 30/36 #1E293B */
.vyt-cta--plain .vyt-cta__title {
	color: var(--wp--preset--color--ink-slate);
	font-size: 30px;
	line-height: 36px;
}

/* node 1:1933 - 197 x 48, radius 60, Inter 600 14/22, and two stacked drop
   shadows. The home page's button (1:1212) has none, which is the other half of
   Q17: these really are two different controls. */
.vyt-cta--plain .is-compact .wp-block-button__link {
	gap: 8px;
	height: 48px;
	padding-inline: 32px;
	border-radius: 60px;
	font-weight: 600;
	box-shadow: 0 0 2px rgba(23, 26, 31, 0.12), 0 2px 5px rgba(23, 26, 31, 0.09);
}

/* =======================================================================
   APIE MUS (node 1:1564)

   Seven sections, all measured from their own nodes. Two things about this
   page's palette before anything else:

   - it introduces a FOURTH neutral ramp. Home is Tailwind grey, shop is
     slate, product is zinc, and Apie mus is a warm green-grey: #2C322E,
     #3E4741, #525B55, #1F2E26, on #F8F7F4 panels. See DESIGN-FACTS.md.
   - #2D4336 is its accent - the outline button, the dark CTA panel and the
     CTA button's label. Kontaktai's accent is #2D4731, four values away and
     NOT the same colour. They are not interchangeable.
   ======================================================================= */

/* --- Hero, Apie mus variant (nodes 13:83 / 13:66) ----------------------
   The home hero one step down. The 632x359 photo is at the same x=744 and the
   same grid, so only the type scale and the buttons change. */

.vyt-hero--about {
	padding-block: 80px;
}

.vyt-hero--about .vyt-hero__title {
	margin-bottom: 24px;
	line-height: 68px;
}

/* node 1:1690 - Inter 400 15/24, a step down from the home hero's 18/28 */
.vyt-hero--about .vyt-hero__lead {
	margin-bottom: 28px;
	max-width: 446px;
	font-size: var(--wp--preset--font-size--md);
	line-height: 24px;
}

/* node 13:66 sits 36px above the heading here, against the home hero's 17 */
.vyt-hero--about .vyt-hero__media {
	margin-top: -36px;
}

.vyt-hero--about .vyt-hero__actions {
	gap: 16px;
}

/* node 1:1691 - 191 x 51, radius 25, Inter 500 14/22 */
.vyt-hero--about .wp-block-button__link {
	gap: 12px;
	height: 51px;
	padding-inline: 24px;
	border-radius: 25px;
	font-size: var(--wp--preset--font-size--base);
	line-height: 22px;
}

/* node 1:1700 - 183 x 51, radius 26, 1px #2D4336, and its label is #2D4336 too,
   where the home hero's outline button is #1F2937. Asymmetric padding is what
   the file draws: 20 before the label, 26 after the glyph. */
/* height repeated here because .wp-block-button.is-style-outline
   .wp-block-button__link is three classes and outranks the rule above. */
.vyt-hero--about .is-style-outline .wp-block-button__link {
	gap: 16px;
	height: 51px;
	padding: 0 24px 0 20px;
	border-color: #2d4336;
	border-radius: 26px;
	color: #2d4336;
}

/* node 1:1701 - a solid 10px triangle, not the home hero's 16px circled play */
.vyt-btn-play-solid {
	--vyt-btn-icon: url("assets/icons/play-solid.svg");
	--vyt-btn-icon-color: #2d4336;
}

.vyt-btn-play-solid .wp-block-button__link::after {
	width: 10px;
	height: 10px;
}

.vyt-btn-arrow-forest {
	--vyt-btn-icon: url("assets/icons/arrow-right.svg");
	--vyt-btn-icon-color: #2d4336;
}

/* --- Kas mes esame (node 1:1709) ---------------------------------------
   A 1312 x 340 #F8F7F4 panel: copy on the left, a 592x260 photo on the right.
   The panel's own padding is 40, and the text inside the left column is
   indented a further 14 while the rule spans the whole column - which is what
   the file draws (rule at x=104, text at x=118), not a rounding error. */

.vyt-about-who {
	padding-block: 0;
}

.vyt-about-who__panel {
	display: grid;
	grid-template-columns: minmax(0, 592px) minmax(0, 592px);
	gap: 56px;
	align-items: start;
	min-height: 340px;
	padding: 40px 32px 40px 40px;
	border-radius: var(--wp--custom--radius--panel);
	background: #f8f7f4;
}

/* 11px of padding, not margin on the heading: a first child's top margin
   collapses out of a plain block container and the column would sit flush. */
.vyt-about-who__text {
	padding-top: 12px;
}

.vyt-about-who__text > p,
.vyt-about-who__text > h2 {
	padding-left: 16px;
}

/* node 1:1711 - Lora 700 28/42 */
.vyt-about-who__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display-s);
	font-weight: 700;
	line-height: 42px;
}

/* node 1:1712 - Inter 400 14/22 #6B7280, with "Vytintas.lt" as its own 600 run */
.vyt-about-who__lead {
	margin: 12px 0 0;
	max-width: 515px;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--base);
	line-height: 22px;
}

.vyt-about-who__lead strong {
	font-weight: 600;
}

/* node 1:1713 - Inter 400 13/21, a step smaller than the paragraph above it */
.vyt-about-who__note {
	margin: 16px 0 0;
	max-width: 523px;
	color: var(--wp--preset--color--text-soft);
	font-size: 13px;
	line-height: 21px;
}

/* node 1:1715 - the rule spans the column, the badges sit on the text indent */
.vyt-about-traits {
	display: flex;
	gap: 52px;
	margin: 16px 0 0;
	padding: 28px 0 0 16px;
	border-top: 1px solid #e5e7eb;
	list-style: none;
}

.vyt-about-traits li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #2c322e;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 20px;
}

.vyt-about-traits__icon {
	display: block;
	flex: none;
}

.vyt-about-traits__icon .vyt-icon {
	display: block;
	width: 32px;
	height: 32px;
}

.vyt-about-who__media {
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	aspect-ratio: 592 / 260;
}

.vyt-about-who__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Mūsų istorija (node 30:207) ---------------------------------------
   A four-point timeline in an 875px column with the photo beside it. The rule
   starts at the FIRST DOT'S CENTRE (x=71), not at the column edge. */

.vyt-about-story {
	padding-block: 72px 0;
}

.vyt-about-story__inner {
	display: grid;
	grid-template-columns: minmax(0, 875px) 389px;
	gap: 48px;
	align-items: start;
}

/* node 1:1724 - Lora 700 26/39, shared with "Kaip gaminame?" */
.vyt-about-story__title,
.vyt-about-process__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: 700;
	line-height: 39px;
}

.vyt-timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}

/* node 1:1727 - 1px #D1D5DB running behind the dots, from the first dot's
   centre to the column's right edge. */
.vyt-timeline::before {
	content: "";
	position: absolute;
	top: 6px;
	right: 0;
	left: 7px;
	height: 1px;
	background: #d1d5db;
}

.vyt-timeline__point {
	position: relative;
}

.vyt-timeline__dot {
	display: block;
	position: relative;
	width: 14px;
	height: 14px;
	border-radius: 7px;
	background: var(--wp--preset--color--ink);
}

/* node 1:1729 - Lora 700 14/21 #1F2E26 */
.vyt-timeline__year {
	display: block;
	margin-top: 12px;
	color: #1f2e26;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 21px;
}

/* node 1:1730 - Inter 400 11/18 #525B55 */
.vyt-timeline__text {
	display: block;
	margin-top: 3px;
	color: #525b55;
	font-size: 11px;
	line-height: 18px;
}

.vyt-about-story__media {
	margin: 4px 0 0;
	overflow: hidden;
	border-radius: 16px;
	aspect-ratio: 389 / 260;
}

.vyt-about-story__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Kaip gaminame (node 30:206) ---------------------------------------
   Six 211x194 cards on an 8px gap. Each card's photo is pinned to the BOTTOM,
   not flowed after the copy - the sixth card's text runs to three lines and
   all six photos still line up. */

.vyt-about-process {
	padding-block: 72px 0;
}

.vyt-process {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.vyt-process__step {
	display: flex;
	position: relative;
	flex-direction: column;
	min-height: 194px;
}

/* node 1:1566 - a 20px #111827 disc with a white Inter 600 11/17 numeral */
.vyt-process__badge {
	display: grid;
	position: absolute;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 17px;
}

/* node 1:1568 - Lora 700 13/20, level with the badge and 28px to its right */
.vyt-process__title {
	position: relative;
	margin: 0 0 0 28px;
	min-height: 20px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
}

/* node 1:1569 - Inter 400 11/17 #525B55, back at the card's left edge */
.vyt-process__text {
	margin: 8px 0 0;
	color: #525b55;
	font-size: 11px;
	line-height: 17px;
}

/* node 1:1570 - 211 x 105, radius 10 */
.vyt-process__media {
	display: block;
	margin-top: auto;
	width: 100%;
	height: 105px;
	border-radius: 10px;
	object-fit: cover;
}

/* --- Kokybė + Vertybės (nodes 1:1754 / 1:1740) -------------------------
   A 755 panel and a 526 panel, 31 apart. */

.vyt-about-panels {
	padding-block: 120px 0;
}

.vyt-about-panels__grid {
	display: grid;
	grid-template-columns: minmax(0, 755px) minmax(0, 526px);
	gap: 32px;
	align-items: start;
}

/* node 1:1754 - #F8F7F4 with the photograph painted over it. The photo's own
   background is the same pale tone, so the copy stays readable on the left
   without a scrim; the crop is the design's own (imageTransform), not centred. */
.vyt-about-quality {
	min-height: 330px;
	padding: 48px 36px;
	border-radius: var(--wp--custom--radius--panel);
	background: #f8f7f4 url("assets/img/design/about-quality-bg.jpg") center / cover no-repeat;
}

.vyt-about-quality__text {
	max-width: 283px;
}

/* node 1:1755 - Lora 700 26/36, shared with "Mūsų vertybės" */
.vyt-about-quality h2,
.vyt-about-values h2 {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: 700;
	line-height: 36px;
}

/* node 1:1756 - Inter 400 13/21 #525B55 */
.vyt-about-quality p {
	margin: 12px 0 0;
	color: #525b55;
	font-size: 13px;
	line-height: 21px;
}

/* node 28:69 - four numbered chips, two across, the label UNDER the badge */
.vyt-about-promises {
	display: grid;
	grid-template-columns: repeat(2, 100px);
	gap: 16px 8px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.vyt-about-promises li {
	color: #2c322e;
	font-size: 10px;
	font-weight: 500;
	line-height: 15px;
}

.vyt-about-promises__badge {
	display: grid;
	place-items: center;
	margin-bottom: 8px;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 17px;
}

/* node 1:1740 - the values panel, 526 x 330 */
.vyt-about-values {
	min-height: 330px;
	padding: 40px 40px 40px 64px;
	border-radius: var(--wp--custom--radius--panel);
	background: #f8f7f4;
}

.vyt-about-values ul {
	display: grid;
	gap: 16px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.vyt-about-values li {
	display: flex;
	gap: 12px;
}

.vyt-about-values__icon {
	display: block;
	flex: none;
	padding-top: 1px;
}

.vyt-about-values__icon .vyt-icon {
	display: block;
	width: 20px;
	height: 20px;
}

/* node 1:1743 - Lora 700 12/18 #111827 over Inter 400 11/17 #525B55 */
.vyt-about-values li > span:last-child {
	display: block;
}

.vyt-about-values li strong {
	display: block;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 18px;
}

.vyt-about-values li strong + span {
	display: block;
	color: #525b55;
	font-size: 11px;
	line-height: 17px;
}

/* --- Tvarumas (node 1:1602) --------------------------------------------
   A 1312 x 147 panel: the heading pair on the left, four lines across the
   rest on a 30px gap. */

.vyt-about-eco {
	padding-block: 56px 0;
}

.vyt-about-eco__panel {
	display: flex;
	align-items: flex-start;
	min-height: 147px;
	padding: 32px 64px 32px 52px;
	border-radius: var(--wp--custom--radius--panel);
	background: #f8f7f4;
}

.vyt-about-eco__intro {
	flex: none;
	margin-right: 72px;
	width: 298px;
}

/* node 1:1603 - Lora 700 24/36 */
.vyt-about-eco__intro h2 {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: 700;
	line-height: 36px;
}

/* node 1:1604 - Inter 400 12/20 #525B55 */
.vyt-about-eco__intro p {
	margin: 8px 0 0;
	color: #525b55;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
}

/* THE FOUR ITEMS FIT ON ONE ROW BY ONE PIXEL, and that is what this rule is
   about. They measure 737px together in a 826px row, so a fixed 30px gap left
   exactly 1px of slack - and the 4pt spacing pass, moving that gap to 32,
   wrapped the fourth item onto a second row and made the panel 83px taller.

   A gap this tight is a trap whichever number is in it: a longer word in any of
   the four strings, or a font that renders a hair wider, wraps it anyway. So the
   gap is a FLOOR and the leftover space is distributed - which lands on the
   design's ~30px on today's copy, and degrades to 24px rather than wrapping when
   the copy grows. */
.vyt-about-eco__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

/* node 1:1606 - Inter 400 11/17 #3E4741, beside a 28px glyph */
.vyt-about-eco__list li {
	display: flex;
	flex: 0 1 auto;
	min-width: 0;
	gap: 8px;
	color: #3e4741;
	font-size: 11px;
	line-height: 17px;
}

/*
 * The designer sized each of the four boxes to its own sentence rather than
 * splitting the row evenly, so the widths are declared. Left to flex freely they
 * shrink in proportion to their text and land up to 44px off. Four fixed
 * sentences in a fixed panel - if the copy changes, so do these.
 *
 * BASIS, NOT WIDTH. 194+187+173+183 plus three 30px gaps is 827, which fits the
 * panel at 1440 and does not at 1280 - the row put 30px past the viewport, and
 * it was the last horizontal overflow left on the site. A basis with shrink
 * allowed still measures the design's width wherever there is room for it.
 */
.vyt-about-eco__list li:nth-child(1) { flex-basis: 194px; max-width: 194px; }
.vyt-about-eco__list li:nth-child(2) { flex-basis: 187px; max-width: 187px; }
.vyt-about-eco__list li:nth-child(3) { flex-basis: 173px; max-width: 173px; }
.vyt-about-eco__list li:nth-child(4) { flex-basis: 183px; max-width: 183px; }

.vyt-about-eco__icon {
	display: block;
	flex: none;
}

.vyt-about-eco__icon .vyt-icon {
	display: block;
	width: 28px;
	height: 26px;
}

/* --- Dark call to action (nodes 1:1768 / 39:1212) ----------------------
   A #2D4336 panel with the smokehouse photograph laid over it at 40% - the
   node's own opacity, not a gradient, which is why the green stays even and
   the fish read across the whole band rather than fading in from one side.

   Used on Apie mus and on Pristatymas ir apmokėjimas. The two nodes carry the
   SAME image and the same internal offsets to the pixel - title +34, lead +95,
   button +54 from the panel's top - so this is one component with two sets of
   copy, not two bands. */

.vyt-cta-dark {
	padding-block: 56px;
}

.vyt-cta-dark__panel {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	overflow: hidden;
	min-height: 157px;
	padding: 0 56px 0 52px;
	border-radius: var(--wp--custom--radius--panel);
	background: #2d4336;
}

.vyt-cta-dark__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.4;
	background: url("assets/img/design/about-cta-bg.jpg") center / cover no-repeat;
}

.vyt-cta-dark__text,
.vyt-cta-dark__panel .wp-block-buttons {
	position: relative;
}

/* node 1:1771 - Lora 700 32/48 white */
.vyt-cta-dark__title {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 48px;
}

/* node 1:1772 - Inter 400 14/21 #E5E7EB, never plain white */
.vyt-cta-dark__lead {
	margin: 12px 0 0;
	color: #e5e7eb;
	font-size: var(--wp--preset--font-size--base);
	line-height: 21px;
}

/* node 1:1773 - 193 x 49, radius 16 - a rounded rectangle, not a pill */
.vyt-cta-dark__button .wp-block-button__link {
	gap: 12px;
	height: 49px;
	padding-inline: 24px;
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	color: #2d4336;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 22px;
}

/* =======================================================================
   PRISTATYMAS IR APMOKĖJIMAS (node 1:2092)

   NOTE ON THE COORDINATES BELOW. This frame's header sits at y=4, not y=0 -
   the whole artboard is nudged down 4px inside its frame. Every value here is
   stated relative to the HEADER's bottom edge, like every other page, so it can
   be compared with the rest of the file rather than to a 4px offset.
   ======================================================================= */

/* --- Delivery hero (nodes 1:2093 / 39:1154) ----------------------------
   A 398px text column against an 858x318 photo - a wider, shorter photo than
   the home and Apie mus heroes, and no buttons, so it is its own section
   rather than another .vyt-hero modifier. */

.vyt-delivery-hero {
	padding-block: 128px 84px;
}

.vyt-delivery-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 398px) minmax(0, 858px);
	gap: 56px;
	align-items: start;
}

/* node 1:2093 - Lora 700 58/68. Two points larger than every other H1 in the
   file, which are 56. */
.vyt-delivery-hero__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 58px;
	font-weight: 700;
	line-height: 68px;
}

/* node 1:2094 - Plus Jakarta Sans 400 18/28 #52525B */
.vyt-delivery-hero__lead {
	margin: 32px 0 0;
	max-width: 380px;
	color: var(--wp--preset--color--text-slate-mid);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 28px;
}

/* node 39:1154 - 858 x 318, radius 31, starting 46px above the heading */
.vyt-delivery-hero__media {
	margin: -46px 0 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--media);
	aspect-ratio: 858 / 318;
}

.vyt-delivery-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Delivery cards (nodes 1:2098 - 1:2158) ----------------------------
   Five 234x220 cards, centre-aligned, on a 36px gap. */

/* Named .vyt-shipping, not .vyt-delivery: the home page already owns
   .vyt-delivery for its 87px delivery strip (node 1:1464), and reusing the name
   inherited that strip's flex layout and 31px padding here. */
.vyt-shipping {
	padding-block: 0;
}

/* node 1:2097 - Lora 700 28/32, shared with the payment and FAQ headings */
.vyt-shipping__title,
.vyt-pay__title,
.vyt-faq__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display-s);
	font-weight: 700;
	line-height: 32px;
}

.vyt-delivery-cards {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 36px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.vyt-delivery-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 220px;
	/*
	 * 24px INSIDE. It was 16, then 31, and both were read off ONE of the five
	 * cards. 31 came from node 1:2114's 172px copy box and it is too tight for
	 * the widest things the card has to hold: node 1:2113's title needs 178px to
	 * stay on the line the design draws it on, and node 1:2188's copy is 185.
	 * 24px leaves 186px of measure, which is inside the 166-188 band that gives
	 * every one of the five cards the design's own line count (measured in the
	 * browser, on the real elements, at this face and size).
	 *
	 * "Pristatome visoje Lietuvoje" wrapping to two lines was what 31px looked
	 * like on the page.
	 */
	padding: 24px;
	border: 1px solid var(--wp--preset--color--line-zinc);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	text-align: center;
}

/* node 1:2099 - a 48px #FAFAFA disc on a 1px #E4E4E7 edge */
.vyt-delivery-card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--wp--preset--color--line-zinc);
	border-radius: 24px;
	background: #fafafa;
}

.vyt-delivery-card__icon .vyt-icon {
	width: 24px;
	height: 24px;
}

/* node 1:2113 - Lora 700 14/20 */
.vyt-delivery-card__title {
	margin: 16px 0 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 20px;
}

/* node 1:2114 - Inter 400 12/20 #71717A */
.vyt-delivery-card__text {
	margin: 8px 0 0;
	color: var(--wp--preset--color--text-slate-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
}

/* node 1:2189 - a 1312 x 54 notice, its icon and sentence CENTRED in the band
   rather than run to the left edge. */
.vyt-delivery-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 24px 0 0;
	min-height: 54px;
	padding: 8px 24px;
	border: 1px solid var(--wp--preset--color--line-zinc);
	border-radius: 13px;
	background: #faf9f6;
	color: #3f3f46;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--base);
	line-height: 20px;
}

.vyt-delivery-note .vyt-icon {
	flex: none;
	width: 20px;
	height: 20px;
}

/* --- Šviežumas. Saugumas. Kokybė. (node 1:2218) ------------------------
   A 1312 x 312 #F5F5F0 panel: a 487x235 photo on the left, a heading and four
   promises on the right. */

.vyt-promise {
	padding-block: 80px 0;
}

.vyt-promise__panel {
	display: grid;
	grid-template-columns: 487px minmax(0, 1fr);
	gap: 72px;
	align-items: start;
	min-height: 312px;
	padding: 36px 32px;
	border: 1px solid var(--wp--preset--color--line-zinc);
	border-radius: var(--wp--custom--radius--panel);
	background: #f5f5f0;
}

/* node 1:2219 - 487 x 235, radius 20, on its own 1px edge */
.vyt-promise__media {
	display: block;
	width: 487px;
	height: 235px;
	border: 1px solid var(--wp--preset--color--line-zinc);
	border-radius: var(--wp--custom--radius--panel);
	object-fit: cover;
}

/* Held to the design's 649px (node 39:1164). Left to fill the panel it is 689
   wide, and the four promise columns spread 12px off their drawn centres. */
.vyt-promise__body {
	max-width: 649px;
	padding-top: 28px;
}

/* node 1:2220 - Lora 700 38/36. The leading is SMALLER than the size, which is
   what the file draws; it is a one-line heading, so it reads as tight rather
   than broken. */
.vyt-promise__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 38px;
	font-weight: 700;
	line-height: 36px;
}

.vyt-promise__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.vyt-promise__list li {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* node 1:2221 - a 40px white disc on a 1px #D4D4D8 edge */
.vyt-promise__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid #d4d4d8;
	border-radius: 20px;
	background: var(--wp--preset--color--base);
}

.vyt-promise__icon .vyt-icon {
	width: 20px;
	height: 20px;
}

/* node 1:2229 - Lora 700 12/16, one line each.

   NOWRAP because the browser sets Lora about 15% wider than Figma does at this
   size: the design gives "Tik natūralūs produktai" a 137px box and one line,
   and the same string needs 158px here. Left to wrap, that one title takes two
   lines and drops its body copy below the other three. The overflow is 12.5px
   into a 39px gutter, so nothing collides. */
.vyt-promise__list strong {
	margin-top: 8px;
	white-space: nowrap;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 16px;
}

/* node 1:2230 - Plus Jakarta Sans 400 11/15 #71717A.

   150px, WIDER THAN THE 133px COLUMN, and centred so it spills 8px into each
   39px gutter - which is what the design does. Its four copy boxes are 103,
   132, 136 and 127 wide inside a ~172px pitch, so the widest one already
   overhangs its share. Held to the column, "Rūpinamės, kad produktai keliautų
   švieži ir saugūs." takes three lines against the design's two and drops that
   item's baseline below the other three. Measured on the real elements, 136 to
   172 gives all four the design's two lines; 150 is the middle of that. */
.vyt-promise__text {
	/* NOT `max-width: 100%` - that caps it back at the 133px column and the
	   overhang is the point. The narrow-viewport rule below releases it. */
	width: 150px;
	margin-top: 8px;
	color: var(--wp--preset--color--text-slate-soft);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	line-height: 15px;
}

/* --- Apmokėjimo būdai (node 39:1170) -----------------------------------
   Four 296x232 cards. Two carry an icon disc, two carry a wordmark. */

.vyt-pay {
	padding-block: 64px 0;
}

/* node 39:1169 - the lock line sits between the heading and the cards */
.vyt-pay__secure {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	color: var(--wp--preset--color--text-slate-soft);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 16px;
}

.vyt-pay__secure .vyt-icon {
	flex: none;
	width: 14px;
	height: 14px;
}

.vyt-pay__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 44px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.vyt-pay__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 232px;
	padding: 24px 16px;
	border: 1px solid var(--wp--preset--color--line-zinc);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	text-align: center;
}

.vyt-pay__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--wp--preset--color--line-zinc);
	border-radius: 24px;
	background: #fafafa;
}

.vyt-pay__icon .vyt-icon {
	width: 24px;
	height: 24px;
}

/* nodes 39:1175 / 39:1176 - the two wordmarks stand in for the icon disc and
   are 28 tall, where the disc is 48, so they carry the difference as margin. */
.vyt-pay__logo {
	display: block;
	margin: 8px 0;
	height: 28px;
	width: auto;
}

/* node 1:2277 - Lora 700 14/20 */
.vyt-pay__name {
	margin: 16px 0 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 20px;
}

/* node 1:2278 - Inter 400 12/20 #71717A */
.vyt-pay__text {
	margin: 8px 0 0;
	color: var(--wp--preset--color--text-slate-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
}

/*
 * 150px, so the two wordmark cards read on THREE lines as the design draws them
 * (nodes 1:2287, 1:2295) rather than two. Matas: "apply pay and google pay cards
 * descriptions dont wrap like theyre supposed to."
 *
 * The design hand-sets 151 and 137; measured in the browser at this face and
 * size, anything from 128 to 170 gives both strings three lines, so 150 sits in
 * the middle of that band and is not a number that only works today. The two
 * cards with a logo row keep the card's full measure, which is what their own
 * 232 and 224 boxes amount to.
 */
.vyt-pay__card.is-wordmark .vyt-pay__text {
	max-width: 150px;
}

/* nodes 1:2279-1:2281 - Plus Jakarta Sans 800 12/16 #27272A. The bank names
   are set in the file's heaviest weight, which is why 800 is fetched at all. */
.vyt-pay__banks {
	display: flex;
	gap: 12px;
	margin: auto 0 0;
	color: #27272a;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 800;
	line-height: 16px;
}

/* node 1:2282 - Plus Jakarta Sans 400 10/15 #A1A1AA */
.vyt-pay__note {
	margin: 4px 0 0;
	color: var(--wp--preset--color--text-slate);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 10px;
	line-height: 15px;
}

.vyt-pay__marks {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: auto 0 0;
}

/* node 1:2310 - Plus Jakarta Sans 800 12/16 #1E40AF */
.vyt-pay__visa {
	color: #1e40af;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 800;
	line-height: 16px;
}

/* nodes 1:2311 / 1:2312 - two overlapping 16px discs, #EF4444 over #F59E0B */
.vyt-pay__mc {
	display: block;
	position: relative;
	width: 28px;
	height: 16px;
}

.vyt-pay__mc::before,
.vyt-pay__mc::after {
	content: "";
	position: absolute;
	top: 0;
	width: 16px;
	height: 16px;
	border-radius: 8px;
}

.vyt-pay__mc::before {
	left: 0;
	background: #ef4444;
}

.vyt-pay__mc::after {
	left: 12px;
	background: #f59e0b;
}

/* --- FAQ and the bulk-order panel (node 39:1229) -----------------------
   A 640px accordion column beside a 600px panel. The pair is 1272 wide inside
   the 1312 column - the design leaves the right edge 40px short, and that is
   what is drawn. */

.vyt-faq {
	padding-block: 96px 0;
}

.vyt-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 640px) minmax(0, 600px);
	gap: 32px;
	align-items: start;
	margin-top: 24px;
}

.vyt-faq__list {
	display: grid;
	gap: 12px;
}

/* node 1:2410 - 640 x 54 closed, 90 open, radius 16 on a 1px #E4E4E7 edge */
.vyt-faq__item {
	border: 1px solid var(--wp--preset--color--line-zinc);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
}

/* node 1:2443 - Lora 600 14/22. SEMI-BOLD, where every other Lora run in the
   file is 700. */
.vyt-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 52px;
	padding: 16px 24px 16px 16px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 22px;
	cursor: pointer;
	list-style: none;
}

.vyt-faq__question::-webkit-details-marker {
	display: none;
}

.vyt-faq__question .vyt-icon {
	flex: none;
	width: 16px;
	height: 16px;
	transition: transform var(--wp--custom--transition);
}

.vyt-faq__item[open] .vyt-faq__question .vyt-icon {
	transform: rotate(180deg);
}

/* node 1:2436 - Inter 400 12/20 #52525B */
.vyt-faq__answer {
	margin: 0;
	padding: 0 24px 16px 16px;
	color: var(--wp--preset--color--text-slate-mid);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
}

/* A question whose answer has not arrived yet (Q19) still opens - it says so
   instead. Only the placeholder line is marked, so when the copy lands the
   modifier disappears and nothing else about the row changes. */
.vyt-faq__answer--pending {
	color: var(--wp--preset--color--text-faint);
	font-style: italic;
}

/* node 1:2444 - 600 x 287, #F8F7F4, radius 20, with the photo bled to the
   panel's right edge behind the copy. */
.vyt-bulk {
	position: relative;
	overflow: hidden;
	min-height: 287px;
	padding: 24px 32px 24px 32px;
	border: 1px solid var(--wp--preset--color--line-zinc);
	border-radius: var(--wp--custom--radius--panel);
	background: #f8f7f4;
}

/* node 39:1364 - 218 x 250 at the panel's right, radius 20 */
.vyt-bulk__media {
	display: block;
	position: absolute;
	top: 19px;
	right: 26px;
	width: 218px;
	height: 250px;
	border-radius: var(--wp--custom--radius--panel);
	object-fit: cover;
}

/* node 1:2446 - a 147 x 24 white pill, Inter 500 12/16 #3F3F46 */
.vyt-bulk__pill {
	display: inline-flex;
	position: relative;
	align-items: center;
	margin: 0;
	height: 24px;
	padding-inline: 8px;
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	color: #3f3f46;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 16px;
}

/* node 1:2448 - Lora 700 24/32, held to the design's 286px measure so it wraps
   to three lines clear of the photograph. */
.vyt-bulk__title {
	position: relative;
	margin: 12px 0 0;
	max-width: 286px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: 700;
	line-height: 32px;
}

/* node 1:2449 - Inter 500 12/20 #52525B */
.vyt-bulk__text {
	position: relative;
	margin: 16px 0 0;
	max-width: 264px;
	color: var(--wp--preset--color--text-slate-mid);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 20px;
}

/* node 1:2450 - 111 x 36, radius 10 - a rounded rectangle, not a pill, and its
   label is Plus Jakarta Sans 600 12/20 */
.vyt-bulk__button {
	display: inline-flex;
	position: relative;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	height: 36px;
	padding-inline: 16px;
	border-radius: 10px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
}

.vyt-bulk__button .vyt-icon {
	width: 16px;
	height: 16px;
}

/* =======================================================================
   KREPŠELIS IR ATSISKAITYMAS (node 1:813)

   The design draws ONE checkout frame and no cart frame at all. What is styled
   here is WooCommerce's own cart and checkout BLOCKS - React components with
   their own DOM - so this section is chrome, layout and type applied to markup
   the theme does not own. It will not match the design node-for-node, and
   trying to force that would mean fighting a component tree that changes with
   every WooCommerce release.

   The five-step bar IS the theme's, and it matches exactly.
   ======================================================================= */

/* --- Progress bar (node 1:1108) ----------------------------------------
   A 113px band under the header: five 40px marks on a hairline, everything
   before the current step ticked. */

/* The 4px margin is the design's own gap between the header's hairline (y=77)
   and this band (y=81). It has to be stated because theme.json's blockGap
   otherwise puts 24px between two top-level blocks - and a class beats the
   :where() selector WordPress wraps that rule in. */
.vyt-progress {
	margin-block-start: 4px;
	padding-block: 24px 24px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* margin-inline: auto, NOT margin: 0. This element also carries .vyt-shell,
   whose whole job is `max-width` plus `margin-inline: auto` - and a blanket
   `margin: 0` here silently cancelled the auto and pinned the bar to the left
   edge on any viewport wider than 1440. It looked perfect at exactly 1440,
   which is why it survived. */
.vyt-progress__list {
	display: flex;
	position: relative;
	justify-content: center;
	gap: 128px;
	margin-block: 0;
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
	list-style: none;
}

/* node 1:1110 - the connector runs BEHIND the marks, which are opaque. The
   design draws it x=268 to x=1172, which is 18px inside the first mark and
   26px past the last, so it is not aligned to anything; these insets are half
   the first and last steps' own widths, which is what it was reaching for. */
.vyt-progress__list::before {
	content: "";
	position: absolute;
	top: 20px;
	right: 77px;
	left: 77px;
	height: 1px;
	background: #e5e7eb;
}

.vyt-progress__step {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

/* node 1:1112 - a 40px disc. White on a 1px #E5E7EB edge, or filled #F54C2D
   for the step the shopper is on. */
.vyt-progress__mark {
	/*
	 * ABOVE THE RULE BEHIND IT. `.vyt-progress__list::before` is absolutely
	 * positioned, and below 782 the steps are `position: static` (the rule that
	 * centres the current label under the whole bar). A positioned element paints
	 * over static content whatever the DOM order, so the hairline was drawn
	 * straight through all five circles, the filled orange one included. Marking
	 * the disc itself as positioned puts it back on top - and it holds whether or
	 * not the step around it is positioned.
	 */
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid #e5e7eb;
	border-radius: 20px;
	background: var(--wp--preset--color--base);
}

.vyt-progress__mark .vyt-icon {
	width: 20px;
	height: 20px;
}

/* The same glyph has to be three colours depending on progress, which a baked
   fill cannot do - so this is the one place in the theme that recolours an
   icon's paths from CSS rather than from its own file. Each colour is still
   read from its node: #9CA3AF ahead (1:1131), #4B5563 done (1:1113), white on
   the current mark (1:1121). */
.vyt-progress__mark .vyt-icon path {
	fill: #9ca3af;
}

.vyt-progress__step.is-done .vyt-progress__mark .vyt-icon path {
	fill: var(--wp--preset--color--text-muted);
}

.vyt-progress__step.is-current .vyt-progress__mark {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
}

.vyt-progress__step.is-current .vyt-progress__mark .vyt-icon path {
	fill: var(--wp--preset--color--base);
}

/* node 1:1118 - Inter 500 12/16 #6B7280, and the current step is 700 #F54C2D */
.vyt-progress__label {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 16px;
	white-space: nowrap;
}

.vyt-progress__step.is-current .vyt-progress__label {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
}

/* --- Cart and checkout shell -------------------------------------------
   Node 1:813 puts the form in a 753px column and the summary in a 486px panel
   at x=890, so the gap is 73. */

.wc-block-components-sidebar-layout {
	gap: 72px;
}

/* WooCommerce's store notices come out `alignwide`, so in a constrained layout
   they are 1440 - centred, but 64px wider on each side than the cart table and
   the summary panel underneath. Symmetric and still visibly not lined up with
   anything. Held to the content column so the green bar's edges match the
   content it is talking about.

   The long selector is deliberate: WordPress sets the wide width with
   `.wp-block-group.is-layout-constrained > .alignwide`, which is three classes
   and outranks a single-class rule. One more class beats it without reaching
   for !important. */
.wp-block-group.is-layout-constrained > .wp-block-woocommerce-store-notices.alignwide {
	max-width: var(--wp--style--global--content-size);
}

/* WooCommerce moves focus onto the "added to cart" notice so a screen reader
   announces it, which is right - but the banner is tabindex="-1", so nobody can
   ever navigate to it, and the theme's brand focus ring therefore drew a 2px
   orange outline around a green success bar for every MOUSE user and did not
   clear on click. A ring on something you cannot focus reads as a border
   somebody forgot to remove. Suppressed here only; every real control keeps
   its :focus-visible ring. */
.wc-block-components-notice-banner:focus,
.wc-block-components-notice-banner:focus-visible {
	outline: none;
}

/* WooCommerce's cart.css puts padding-right: 4.5283% on the main column to make
   its OWN gutter. With the 73px gap above that is a DOUBLE gutter: the cart
   table stopped 59px short of its own column, leaving 132px of dead space and a
   "Viso" column that right-aligned to nothing. Zeroed, so the content fills the
   753px the design gives it - node 1:930's field is 752 wide and runs to x=816,
   which is that column's real right edge. */
.wc-block-components-sidebar-layout .wc-block-components-main {
	padding-right: 0;
}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	max-width: calc(1312px + (2 * var(--wp--custom--gutter)));
	margin-inline: auto;
	padding: 40px var(--wp--custom--gutter) 96px;
}

/* THE COLUMNS ARE PROPORTIONAL, AND ONLY WHILE THERE ARE COLUMNS. Two things
   were wrong with the fixed 753/486 they replace.

   They were WIDTHS ONLY ABOVE 768px. Below that WooCommerce stacks the layout by
   switching the flex direction to `column`, and a flex-basis in a column flex is
   a HEIGHT - so the summary column was 486px TALL on a phone, its bottom third
   empty under the back link.

   And between 768 and 1440 they did not FIT. 753 + 72 + 486 is 1311, so at any
   content width under that the two columns wrapped onto separate rows and the
   page showed a 428px summary sitting under a 728px form. The ratios below are
   the design's own - 753, 73 and 486 of 1312 - so at 1440 the columns land
   exactly where node 1:813 draws them and they stay side by side all the way
   down to the plugin's own stacking point.

   783, NOT 768. WooCommerce goes back to a row somewhere between 730 and 740 -
   measured, not read: its layout runs on CSS `@container` queries at 700, and
   the container is narrower than the viewport by the gutter. So between its
   breakpoint and ours the columns were `row` but did not FIT: 65% + 35% is the
   whole track and our gap is added on top, so at 767 the page drew a 473px form
   with a 254px summary WRAPPED underneath it, left-aligned in a 687px column.
   The stacked block at the end of this file now forces `column` below 783, so
   the cart and the checkout stack at the same width as every other component on
   the site instead of at a number belonging to the plugin. */
@media ( min-width: 783px ) {
	.wc-block-components-sidebar-layout {
		gap: 5.5%;
	}

	.wc-block-checkout__main,
	.wc-block-cart__main {
		flex: 1 1 57.4%;
		min-width: 0;
	}

	.wc-block-checkout__sidebar,
	.wc-block-cart__sidebar {
		flex: 1 1 37%;
		min-width: 0;
	}
}

/* node 1:916 - Lora 700 30/36 */
.wc-block-components-title,
.wc-block-cart__submit-container + *,
.wp-block-woocommerce-checkout h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

/* The section headings inside the form.

   NORMALISED, BECAUSE THE DESIGN DRAWS THREE OF THEM THREE DIFFERENT WAYS:
   "Asmens duomenys" is Lora 700 18px #1E293B (node 1:919), "Pristatymo adresas"
   is INTER 700 16px #111827 (node 1:944) and "Apmokėjimo būdas" is Lora 700 16px
   #111827 (node 1:981). One level of heading cannot have three treatments, so
   the majority wins: Lora 700 16/24 #111827.

   THE SELECTOR CARRIES TWO CLASSES ON PURPOSE. WooCommerce writes
   `.wc-block-components-title.wc-block-components-title` - the same class twice,
   purely for specificity - so a one-class rule here loses and the heading kept
   rendering at weight 500. Verified by walking document.styleSheets, not
   guessed. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 24px;
}

/* nodes 1:921 / 1:922 - a 12/20 #71717A label over a 41px #F9FAFB field on a
   1px #F8F7F4 edge, radius 10. WooCommerce floats its labels inside the input,
   so the label colour and the field chrome are what carry across. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-block-components-combobox-control input.components-combobox-control__input {
	/* THE VALUES AGREE WITH THE RULE FURTHER DOWN THIS FILE ON PURPOSE. That one
	   carries WooCommerce's block-wrapper prefixes and wins on the checkout; this
	   one is what reaches the combobox, which that selector does not cover. They
	   used to disagree - #1e293b against #111827, and 22px of leading against 20 -
	   so which value you got depended on which field you were looking at. If one
	   changes, change both. */
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fcfdfd;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	line-height: 20px;
}

/* The combobox label only - the text-input label is described in ONE place, the
   rule that carries WooCommerce's own selector shape further down this file. */
.wc-block-components-combobox-control label {
	font-family: var(--wp--preset--font-family--body);
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
	border-color: var(--wp--preset--color--brand);
	box-shadow: none;
	outline: none;
}

/*
 * node 1:814 - the summary panel, #FCFDFD on a 1px #F3F4F6 edge, radius 20.
 *
 * ONLY THE PANEL IS ROUNDED. An earlier version of this rule also rounded
 * .wc-block-components-totals-wrapper and .wc-block-components-panel, which made
 * every totals row inside the card a nested rounded box - Matas, review: "the
 * lines are not line dividers they look like containers with box radius." Those
 * two are separated by plain 1px rules (nodes 1:892 and 1:817), so they are
 * dropped here rather than un-rounded again further down the file, where the
 * one-class selector lost to this two-class one and the box stayed.
 */
.wc-block-cart__sidebar > .wc-block-components-sidebar {
	border-radius: var(--wp--custom--radius--panel);
}

.wc-block-components-sidebar {
	padding: 28px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--panel);
	background: #fcfdfd;
	/* Node 1:814 carries two drop shadows, both black at 10%, y+1, blur 2 and 3.
	   They are why the panel lifts off the page in the design and sat flat in the
	   build - the cockpit's verify pass reported it as "missing drop-shadow". */
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.1 ), 0 1px 3px rgba( 0, 0, 0, 0.1 );
}

/* WooCommerce puts 16px above the summary heading, inside a card that is already
   padded - so the title sat 16px lower than node 1:815 draws it. */
.wc-block-components-sidebar .wc-block-components-checkout-order-summary__title {
	margin-top: 0;
}

/* Placeholder text is #9ca3af in the design (node 1:969), and the block checkout
   had no placeholder rule at all - so the note field's example line rendered in
   the input's own near-black and read as a value somebody had typed. */
.wp-block-woocommerce-checkout ::placeholder,
.wp-block-woocommerce-cart ::placeholder {
	color: var(--wp--preset--color--text-faint);
	opacity: 1;
}

/* node 1:815 - "Užsakymo santrauka", Lora 700 20/28 in sentence case.
   WooCommerce sets it uppercase and letter-spaced, which no heading in this
   file is. */
/* THREE SELECTORS FOR ONE HEADING, because WooCommerce uses a different element
   for it on the cart than on the checkout, and a third when the checkout is
   stacked. `.wc-block-cart .wc-block-cart__totals-title` is two classes and was
   winning: the cart's summary read "KREPŠELIO SKAIČIAVIMAS", 13px Inter,
   uppercase - the only shouting heading on the site. */
.wc-block-components-sidebar .wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text,
.wc-block-cart .wc-block-cart__totals-title {
	margin: 0 0 24px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 28px;
	letter-spacing: 0;
	text-transform: none;
}

/* nodes 1:894 / 1:895 / 1:893 - Lora 700 14/16 name, Inter 400 11/17 #9CA3AF
   weight, Inter 700 12/16 price */
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 16px;
}

.wc-block-components-order-summary-item__total-price {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 16px;
}

/* nodes 1:818 / 1:819 - Inter 400 12/16 #4B5563 against Inter 500 12/16 */
.wc-block-components-totals-item__label {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 16px;
}

.wc-block-components-totals-item__value {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 16px;
}

/* nodes 1:831 / 1:832 - "Iš viso" Lora 700 16/24 beside Inter 700 20/28 */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 24px;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 28px;
}

/*
 * node 1:833 - "Įskaitant PVM (21%)" Inter 400 11/17 #9CA3AF
 *
 * LIVE SINCE 2026-10-23, and this rule is why that cost nothing. It was written
 * to the design in August and then kept as dead CSS for two months: VAT was
 * switched off (Roberta, 2026-08-26: "ištrink dabar" - Q8), so WooCommerce
 * emitted no tax line and the selector matched nothing. The note then said the
 * trigger for it coming back would be a business event rather than a design
 * change, and that is exactly what happened - the client told us he is a PVM
 * payer. Tax calculation went back on and the line reappeared already styled.
 *
 * The wording comes from inc/i18n-blocks.php, not from here.
 */
.wc-block-components-totals-footer-item-tax {
	color: var(--wp--preset--color--text-faint);
	font-size: 11px;
	line-height: 17px;
}

/* nodes 1:874 / 1:882 - a 48px pill, Inter 600 14/22, full width of the panel */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
	height: 48px;
	border-radius: 60px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 22px;
}

/* node 1:890 - "Grįžti į produktų puslapį", Inter 500 12/16 #4B5563, centred
   under the button rather than pinned to a side. */
.wc-block-cart__submit-container + .wc-block-components-notice-banner,
.wp-block-woocommerce-cart-order-summary-block + * {
	font-size: var(--wp--preset--font-size--sm);
}

/* The cart's line items - the design never drew this page, so the rules below
   are the file's own card and type language applied to WooCommerce's table,
   not a layout anyone approved. See docs/OPEN-QUESTIONS.md Q3. */
/* `table.` on the front, matching cart.css's own `table.wc-block-cart-items
   .wc-block-cart-items__header` - without it the column headings stayed
   uppercase however many times the rule said otherwise. */
table.wc-block-cart-items .wc-block-cart-items__header {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.wc-block-cart-item__product .wc-block-components-product-name {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
}

/*
 * The cart's line-item thumbnail. There is NO cart frame in the Figma file, so
 * this follows the checkout summary's 64x64 radius-10 thumbnail (node 1:896)
 * rather than inventing a second treatment.
 *
 * A fixed width cannot win here - cart.css sets `table.wc-block-cart-items ...
 * { width: 100% }`, an element plus two classes - and it was rendering 80x64,
 * i.e. stretched out of square. So the SHAPE is enforced instead of the size:
 * the cell may size it, the aspect ratio keeps it square and cover crops it.
 */
table.wc-block-cart-items .wc-block-cart-item__image img,
.wc-block-cart-item__image img {
	/* The selector mirrors cart.css's own `table.wc-block-cart-items ... img`.
	   aspect-ratio alone did not square it: the cell hands the image a width and
	   something further down still fixed the height, so it stayed 80x64. */
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 10px;
	object-fit: cover;
}

/* --- Page shell -------------------------------------------------------
   Ordinary editor-driven pages (the legal pages, blog posts, 404). The seven
   designed pages get their own patterns and do not use this. */

.vyt-page {
	padding-block: 64px 96px;
}

.vyt-page--narrow {
	max-width: 720px;
}

.vyt-page > * + * {
	margin-top: 24px;
}

.vyt-page h1,
.vyt-page h2,
.vyt-page h3 {
	margin-top: 48px;
	margin-bottom: 0;
}

.vyt-page > :first-child {
	margin-top: 0;
}

/* --- Responsive -------------------------------------------------------
   The Figma file contains desktop frames only (seven 1440px "Output Screen"
   frames, no mobile variants). Everything below is therefore a derived
   layout, not a design the client has approved - it is written to keep the
   desktop composition intact down to the point where it cannot hold, and it
   is flagged in docs/OPEN-QUESTIONS.md for the designer to confirm. */

@media (max-width: 1024px) {
	:root,
	body {
		--wp--custom--gutter: 32px;
	}

	.vyt-nav-toggle {
		display: flex;
		order: 2;
		margin-left: auto;
	}

	.vyt-cart-link {
		order: 1;
	}

	.vyt-nav {
		order: 3;
		position: fixed;
		inset: 0;
		z-index: 40;
		display: none;
		flex-direction: column;
		align-items: stretch;
		margin: 0;
		padding: 24px var(--wp--custom--gutter) 48px;
		background: var(--wp--preset--color--base);
		overflow-y: auto;
	}

	.vyt-nav.is-open {
		display: flex;
		/* THE PANEL NEVER COVERED THE PAGE, AND IT NEVER HAS. It is
		   `position: fixed` with `inset: 0`, which should make it the height of
		   the viewport - and it measured 456px on an 844px screen, then 391 once
		   this pass tightened its spacing, because it was sizing to its own
		   content the whole time. Below it you could read the hero's second
		   button, the hero photograph and the first product row straight through
		   the open menu. That is almost certainly the "really large gap when the
		   menu opens" from the previous round, misread then as spacing.

		   THE CAUSE: `.vyt-nav` is an out-of-flow child of the header's flex row,
		   and its inset-based stretch does not survive that - the computed style
		   says `top: 0`, `bottom: 0` and `height: 390.594px` at the same time.
		   Forcing a height gives 844, so the containing block is the viewport and
		   only the stretch is lost.

		   `100dvh`, not `100vh`, because on a phone `vh` is the tallest the
		   viewport ever gets and the browser's own chrome then covers the bottom
		   of the panel. `vh` first for anything that does not know `dvh`. */
		height: 100vh;
		height: 100dvh;
	}

	/* --- The header bar on a phone --------------------------------------
	   LOGO LEFT, CART AND MENU RIGHT, and the cart is an icon with a count
	   rather than an icon with a word and a count.

	   Matas: "Header cart should be at the right instead of left in my opinion,
	   and think of which is the best for mobile - cart icon + text + count, cart
	   icon + count or just cart icon?"

	   Icon + count. The logo anchors the left and the menu button anchors the
	   right, so a labelled cart sitting between them was the only thing in the
	   bar not attached to an edge - which is what made it read as misplaced. The
	   count is what a shopper actually looks for, the bag says what it counts,
	   and dropping the word buys about 70px of a 390px bar. The label stays in
	   the markup for screen readers. */
	.vyt-header__brand {
		margin-right: auto;
	}

	.vyt-cart-link__label {
		display: none;
	}

	/* 44x44 EXPLICITLY. It used to be stretched to that by the header's flex
	   line; giving the brand `margin-right: auto` took the stretch away and the
	   button quietly fell back to its 40x30 content box - a tap target that the
	   header change shrank without touching its own rule. */
	.vyt-nav-toggle {
		margin-left: 0;
		width: 44px;
		height: 44px;
	}

	/* The panel's own head row: the same logo on the left, the close on the
	   right, on the line the site header occupies. */
	.vyt-nav__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 24px;
	}

	.vyt-nav__brand {
		display: block;
		line-height: 0;
	}

	.vyt-nav__brand img {
		display: block;
		width: 55px;
		height: auto;
	}

	.vyt-nav__close {
		display: flex;
		align-self: auto;
		margin-bottom: 0;
	}

	.vyt-nav__list {
		gap: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.vyt-nav__link {
		padding-block: 16px;
		font-size: var(--wp--preset--font-size--xl);
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	/* The active rule is a full-width underline on desktop; inside the stacked
	   panel it would sit on top of the row's own divider. */
	.vyt-nav__item.is-active .vyt-nav__link::after {
		display: none;
	}

	.vyt-nav__item.is-active .vyt-nav__link {
		color: var(--wp--preset--color--brand);
	}

	.vyt-nav-open {
		overflow: hidden;
	}

	.vyt-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
	}

	.vyt-card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vyt-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.vyt-hero__title {
		font-size: var(--wp--preset--font-size--display-m);
		line-height: 46px;
	}

	/* Derived. The Apie mus hero's own line-height is two classes deep, so it
	   outranks the rule above and has to be restated - otherwise the heading
	   drops to 36px while its leading stays at 68. */
	.vyt-hero--about .vyt-hero__title {
		line-height: 46px;
	}

	.vyt-hero--about {
		padding-block: 48px;
	}

	.vyt-delivery-hero {
		padding-block: 48px;
	}

	.vyt-delivery-hero__inner,
	.vyt-promise__panel,
	.vyt-faq__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.vyt-delivery-hero__media {
		margin-top: 0;
	}

	.vyt-delivery-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	/* Below the design width the four promises are no longer a fixed grid, so
	   the deliberate 8px overhang above has nothing to hang into. */
	.vyt-promise__text {
		width: auto;
		max-width: 150px;
	}

	.vyt-promise__panel {
		padding: 32px;
	}

	.vyt-promise__media {
		width: 100%;
		height: auto;
		aspect-ratio: 487 / 235;
	}

	.vyt-promise__body {
		max-width: none;
		padding-top: 0;
	}

	.vyt-promise__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}

	.vyt-pay__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	/* Derived: stacked, the bulk panel's photo would sit on top of the copy, so
	   it goes back into the flow above it. */
	.vyt-bulk__media {
		position: static;
		width: 100%;
		height: 180px;
		margin-bottom: 20px;
	}

	.vyt-promise,
	.vyt-pay,
	.vyt-faq {
		padding-block: 48px 0;
	}

	.vyt-hero--about .vyt-hero__media {
		margin-top: 0;
	}

	.vyt-about-who__panel,
	.vyt-about-story__inner,
	.vyt-about-panels__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.vyt-about-who__panel {
		padding: 32px;
	}

	.vyt-about-who__text {
		padding-top: 0;
	}

	.vyt-about-traits {
		flex-wrap: wrap;
		gap: 24px 32px;
	}

	/* Derived: three across, then two. The rule behind the dots only makes
	   sense while they are on one row, so it is dropped with the single row. */
	.vyt-timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 20px;
	}

	.vyt-timeline::before {
		display: none;
	}

	.vyt-process {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px 8px;
	}

	.vyt-about-quality,
	.vyt-about-values {
		min-height: 0;
	}

	.vyt-about-quality {
		padding: 32px;
	}

	/* Derived: stacked, the photograph sits behind the copy rather than beside
	   it, so the pale tone is held under the text column.

	   0.96, NOT 0.88. At 88% the smoked fish behind it read straight through the
	   two 11px promise labels in the right-hand column - "Be dirbtinių priedų"
	   over a dark fillet at 768 was the worst contrast anywhere on the site. The
	   photograph is still visible through the panel at 96%; the words are now
	   legible over it, which is the order those two things belong in. */
	.vyt-about-quality__text {
		max-width: none;
		padding: 16px;
		border-radius: 12px;
		background: rgba(248, 247, 244, 0.96);
	}

	.vyt-about-values {
		padding: 32px;
	}

	.vyt-about-eco__panel {
		flex-wrap: wrap;
		gap: 24px;
		padding: 32px;
	}

	.vyt-about-eco__intro {
		margin-right: 0;
		width: 100%;
	}

	.vyt-about-eco__list {
		flex-wrap: wrap;
		margin-top: 0;
	}

	/* `max-width`, not just `width` - the four declarations above set BOTH, and
	   releasing only the basis left the 194/187/173/183px ceilings in place. On a
	   350px phone that is what turned two-word sentences into three-line columns
	   with 90px of unused space beside them. */
	.vyt-about-eco__list li:nth-child(1),
	.vyt-about-eco__list li:nth-child(2),
	.vyt-about-eco__list li:nth-child(3),
	.vyt-about-eco__list li:nth-child(4) {
		flex: 1 1 240px;
		width: auto;
		max-width: none;
	}

	.vyt-cta-dark__panel {
		flex-wrap: wrap;
		padding: 32px;
	}

	.vyt-about-panels,
	.vyt-about-process,
	.vyt-about-story {
		padding-block: 48px 0;
	}

	.vyt-about-eco,
	.vyt-cta-dark {
		padding-block: 32px;
	}

	.vyt-story__panel {
		grid-template-columns: minmax(0, 1fr);
		padding: 40px 32px;
	}

	.vyt-story__media {
		display: none;
	}

	.vyt-cta__panel {
		flex-wrap: wrap;
		padding: 24px;
	}

	/* The unpanelled variant has no panel to pad - only the gutter. */
	.vyt-cta--plain .vyt-cta__panel {
		padding: 0;
	}

	/* Derived: the map card sits under the form instead of beside it, so its
	   630px floor would only add empty space. */
	.vyt-map-card {
		min-height: 0;
	}

	/* THE DIVIDER RIDES ON THIS MAX-WIDTH. 518px is the design's measure for the
	   privacy line, and the rule above it is that element's own `border-top` -
	   so once the form card goes full width the fields ran to 806px and the line
	   above them stopped at 518, 155px short of everything it was separating. */
	.vyt-form__privacy {
		max-width: none;
	}

	.vyt-map-card__route {
		margin-top: 40px;
	}

	/* Derived: the wholesale band's three columns will not hold at this width.
	   Mark, text and action stack, and the design's 125px right inset becomes
	   the same 40px the rest of the card uses. */
	.vyt-wholesale__card {
		flex-wrap: wrap;
		gap: 24px;
		padding: 32px 40px;
	}

	.vyt-wholesale__text {
		margin-left: 0;
		flex: 1 1 320px;
	}

	.vyt-wholesale__action {
		margin-left: 0;
		align-items: flex-start;
	}

	.vyt-order__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.vyt-shop__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.vyt-page-hero__inner,
	.vyt-shop-hero__inner,
	.vyt-product__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.vyt-page-hero__media {
		margin-top: 0;
	}

	.vyt-contact-cards__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vyt-contact-body__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.vyt-product__form .single_add_to_cart_button {
		min-width: 0;
		width: 100%;
	}

	.vyt-shop-hero__title {
		font-size: var(--wp--preset--font-size--display-l);
		line-height: 56px;
	}

	.vyt-shop__results {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vyt-gift__media {
		opacity: 0.35;
	}

	.vyt-gift__title {
		font-size: var(--wp--preset--font-size--display-m);
		line-height: 42px;
		max-width: none;
	}

	/* Below the designed width there is no room beside the copy, so the button
	   returns to the normal flow under it. */
	.vyt-gift__body .wp-block-buttons {
		position: static;
		margin-top: 24px;
	}
}

@media (max-width: 782px) {
	:root,
	body {
		--wp--custom--gutter: 20px;
	}

	.vyt-footer__columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.vyt-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.vyt-section__head {
		flex-wrap: wrap;
	}

	.vyt-hero__title {
		font-size: var(--wp--preset--font-size--display-s);
		line-height: 36px;
		letter-spacing: -0.5px;
	}

	.vyt-hero--about .vyt-hero__title {
		line-height: 36px;
	}

	.vyt-delivery-hero__title {
		font-size: var(--wp--preset--font-size--display-s);
		line-height: 36px;
	}

	.vyt-delivery-cards,
	.vyt-pay__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vyt-promise__title {
		font-size: 26px;
		line-height: 32px;
	}

	/* Derived: the columns are far below the design's 137 here, so the titles
	   have to be allowed to wrap again - the desktop nowrap only holds because
	   it overflows into a 39px gutter that no longer exists. */
	.vyt-promise__list strong {
		white-space: normal;
	}

	.vyt-delivery-note {
		align-items: flex-start;
		text-align: left;
	}

	.vyt-timeline,
	.vyt-process {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/* Derived: one per row, the photo can be wider than the design's 211 */
	.vyt-process__step {
		min-height: 0;
	}

	.vyt-process__media {
		margin-top: 16px;
		height: 160px;
	}

	.vyt-about-promises {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vyt-cta-dark__title {
		font-size: 26px;
		line-height: 34px;
	}

	.vyt-story__features {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.vyt-cta__title {
		font-size: var(--wp--preset--font-size--xxl);
		line-height: 28px;
	}

	.vyt-shop-hero__title {
		font-size: var(--wp--preset--font-size--display-m);
		line-height: 42px;
		letter-spacing: -1px;
	}

	.vyt-cats__grid,
	.vyt-shop__results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vyt-contact-cards__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.vyt-page-hero__title {
		font-size: var(--wp--preset--font-size--display-m);
		line-height: 46px;
	}

	.vyt-delivery {
		flex-wrap: wrap;
		padding: 20px;
	}

	.vyt-delivery__time {
		padding-left: 0;
		border-left: 0;
	}

	.vyt-gift__panel {
		padding: 28px 24px;
	}

	.vyt-gift__title {
		font-size: var(--wp--preset--font-size--display-s);
		line-height: 32px;
	}

	.vyt-footer__legal {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	/* Derived: on a phone the wholesale card centres, because a 218px button
	   stranded on the left of a full-width card reads as a mistake. */
	.vyt-wholesale__card {
		flex-direction: column;
		align-items: center;
		padding: 32px 24px;
		text-align: center;
	}

	/* The tablet rule's flex-basis is a WIDTH in a row and a HEIGHT in a column,
	   so leaving it here gives the text block 320px of height and opens a gap
	   above the button. */
	.vyt-wholesale__text {
		flex: none;
	}

	.vyt-wholesale__action {
		align-items: center;
		width: 100%;
	}

	.vyt-wholesale__button {
		width: 100%;
		max-width: 320px;
	}

	.vyt-wholesale__title {
		font-size: 24px;
		line-height: 30px;
	}

	.vyt-cta--plain .vyt-cta__title {
		font-size: 24px;
		line-height: 32px;
	}

	.vyt-map-card {
		padding: 24px;
	}

}

/* The header bag is the 20px export scaled to the 16px the six 77px-band frames
   draw. An SVG scales losslessly, so this is the same glyph, not a substitute. */
.vyt-cart-link .vyt-icon {
	width: 16px;
	height: 16px;
}
/* Derived. The design draws one 1440px checkout and no cart at all, so both
   below this width are the developer's, not the designer's. */
@media (max-width: 1024px) {
	.vyt-progress__list {
		gap: 40px;
		overflow-x: auto;
	}

	.vyt-progress__label {
		font-size: var(--wp--preset--font-size--xs);
	}

	.wc-block-components-sidebar-layout {
		gap: 32px;
	}
}

@media (max-width: 782px) {
	/* Five labelled steps do not fit a phone. The marks stay - they are the
	   progress - and the labels reduce to the current one, which is the only
	   thing a shopper needs to read. */
	.vyt-progress__list {
		justify-content: space-between;
		gap: 8px;
		overflow-x: visible;
	}

	.vyt-progress__list::before {
		right: 20px;
		left: 20px;
	}

	.vyt-progress__step:not(.is-current) .vyt-progress__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* THE CURRENT LABEL IS CENTRED UNDER THE WHOLE BAR, not under its own mark.
	   Centred on the mark it overflowed the moment the current step was the LAST
	   one - which is exactly what the order-confirmation page is, and its label
	   is the longest of the five: "Užsakymo patvirtinimas" ran 25px past the
	   right edge of a 390px screen. Anchoring to the list cannot overflow
	   whichever step is current, and the mark above it still says which. */
	.vyt-progress__step {
		position: static;
	}

	.vyt-progress__step.is-current .vyt-progress__label {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		margin-top: 8px;
		transform: none;
		text-align: center;
	}

	.vyt-progress {
		padding-block: 24px 40px;
	}
}

/* --- Shop: Dovanų rinkiniai band (node 39:711) ------------------------
   The card is 944 wide and RIGHT-ALIGNED in the 1312 content column, so the
   368px of white on its left is the design's own asymmetry. The photo overhangs
   it - 73px above the top edge and 18px past the right - which is why the band
   carries the vertical room rather than the card. */
.vyt-giftband {
	padding-block: 72px 48px;
}

.vyt-giftband__card {
	position: relative;
	margin-left: auto;
	width: min(944px, 100%);
	min-height: 304px;
	padding: 36px 48px;
	border-radius: 20px;
	background: #111827;
	/*
	 * CLIPPED TO THE CARD. The photo is positioned to overhang, and without this
	 * it rendered as a hard-edged rectangle floating above, right of and below the
	 * rounded card - on the shop page it overlapped the promise band underneath
	 * and sat on top of "Saugu ir patikima".
	 *
	 * The design's own overhang is an illusion: node 39:712 is a 451x451 photo
	 * whose own background is the same #111827 as the card, so it READS as
	 * spilling out while staying inside a rounded shape. A raw image fill has no
	 * such courtesy.
	 */
	overflow: hidden;
}

.vyt-giftband__body {
	position: relative;
	z-index: 1;
	max-width: 443px;
}

/* node 39:714 - a 71x27 pill, radius 50, holding Inter 700 11/17 white */
.vyt-giftband__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 71px;
	height: 27px;
	padding-inline: 12px;
	border-radius: 50px;
	background: #f54c2d;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
}

/* node 39:716 - Inter 700 42/46 #ffffff, the line break is the design's */
.vyt-giftband__title {
	margin: 12px 0 0;
	color: #fff;
	font-size: 42px;
	font-weight: 700;
	line-height: 46px;
}

/* node 39:717 - Inter 400 14/20 #e5e7eb */
.vyt-giftband__copy {
	margin: 12px 0 0;
	color: #e5e7eb;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

/* Same rounding as the trust titles: node 39:717 is 346x20, i.e. ONE line, and
   the string measures a hair over 346 in the browser. Capped at 346 it broke to
   two lines and pushed the card from the design's 304px to 324px. Only applied
   at the width the design specifies - below it the line has to wrap. */
@media (min-width: 1101px) {
	.vyt-giftband__copy {
		white-space: nowrap;
	}
}

/* node 39:718 - a 225x48 white pill, radius 24, with an 11px arrow */
.vyt-giftband__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
	/* node 39:718 is 225x48 around a 145px label and a 16px glyph: 28px inset
	   either side, 8px between the two. */
	min-width: 225px;
	height: 48px;
	padding-inline: 28px;
	border-radius: 24px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	transition: background var(--wp--custom--transition);
}

.vyt-giftband__button:hover {
	background: #f4f3ed;
}

/*
 * 16px, NOT 11. Node 1:1535 / 39:720 is a 16x16 "Arrow right" - the same glyph
 * the home band's button carries - and drawing it at 11 made the two bands ship
 * visibly different arrows from one design. Matas: "not the same as in the
 * design. Where did you even get that one from".
 */
.vyt-giftband__button .vyt-icon {
	width: 16px;
	height: 16px;
}

/* node 39:712 - 451x451, sitting 73px above the card and 18px past its right */
.vyt-giftband__photo {
	position: absolute;
	top: -73px;
	right: -18px;
	width: 451px;
	height: 451px;
	/* The source is now the ORIGINAL image fill (imageRef 8bec7126..., 1254x1254)
	   rather than a render of node 39:712. A node render bakes in whatever the
	   node sits on, so the first export carried the card's #111827 behind the
	   photo and painted a dark rectangle past the card's edges. The raw fill is
	   just the photograph, and Figma's own scaleMode on that node is FILL. */
	object-fit: cover;
	pointer-events: none;
}

/* Below the width the design specifies there is no overhang to be faithful to:
   the photo would cover the copy. It becomes a normal block under the text. */
@media (max-width: 1100px) {
	.vyt-giftband {
		padding-block: 40px;
	}

	.vyt-giftband__card {
		display: flex;
		flex-direction: column;
		gap: 24px;
		align-items: flex-start;
	}

	.vyt-giftband__photo {
		position: static;
		width: min(451px, 100%);
		height: auto;
	}
}

/* --- Shop: the four promises (node 1:705) -----------------------------
   1312x104 on the content column, #f4f3ed, radius 20. Items sit 63px inside it
   with 91px between - space-between reproduces both exactly at 1440 and cannot
   drift wider, because the band is capped at the content column's width. */
.vyt-trust {
	padding-block: 0 48px;
}

.vyt-trust__list {
	display: flex;
	/* ONE ROW AT THE DESIGN'S WIDTH. The four items measure 196 + 239 + 249 +
	   230 = 914, plus three 91px gaps and 2x63px of padding = 1313, which is the
	   1312 band. It only fits because each text column is capped at its own
	   design width below - left to size themselves the copy runs long, the total
	   passes 1312 and the fourth promise wraps onto a second row. */
	flex-wrap: nowrap;
	justify-content: space-between;
	/* A MINIMUM gap - space-between spreads the remainder, which lands the four
	   items on the design's own 127 / 414 / 744 / 1084 at 1440. */
	gap: 24px 40px;
	margin: 0;
	padding: 24px 64px;
	min-height: 104px;
	border-radius: 20px;
	background: #f4f3ed;
	list-style: none;
}

/* Text-column widths straight off nodes 1:708/712/716/720 and 1:709/713/717/721.
   They are not equal in the design and forcing them equal changes every wrap. */
.vyt-trust__item:nth-child(1) .vyt-trust__text { width: 130px; }
.vyt-trust__item:nth-child(2) .vyt-trust__text { width: 173px; }
.vyt-trust__item:nth-child(3) .vyt-trust__text { width: 183px; }
.vyt-trust__item:nth-child(4) .vyt-trust__text { width: 164px; }

/*
 * THE TITLES NEVER WRAP, AND THIS IS THE INTERESTING ONE.
 *
 * Figma reports "Natūraliai paruošta" as a single 20px line in a 130px box.
 * Inter IS loaded and IS the font in use, and the browser measures that exact
 * string at 130px too - so it is not a font substitution. It is the rounding:
 * Figma's box is the text width rounded, the real width is a fraction over, and
 * a 130px container therefore wraps what the design draws on one line.
 *
 * So the column keeps the design's WIDTH - which is what makes the two-line copy
 * below break where the design breaks it - and only the title is exempted. An
 * earlier attempt used min-width instead, which let the copy take its max-content
 * width, widened all four columns and dragged every item ~25px off its design x.
 */
.vyt-trust__title {
	white-space: nowrap;
}

/* Below the design's width there is no single-row layout to be faithful to. */
@media (max-width: 1180px) {
	.vyt-trust__list {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 24px 40px;
		padding-inline: 32px;
	}

	.vyt-trust__item {
		flex: 1 1 260px;
	}

	/* `:nth-child()` IS PART OF THE SPECIFICITY, and that is the whole reason
	   this rule reads the way it does. The four widths above are written
	   `.vyt-trust__item:nth-child(1) .vyt-trust__text`, which is (0,3,0); the
	   two-class override this replaces was (0,2,0) and therefore never applied.
	   The fix was in the file, looked right, and did nothing - the promise copy
	   was still wrapping to the designer's 130px column on a 350px phone. */
	.vyt-trust__item:nth-child(1) .vyt-trust__text,
	.vyt-trust__item:nth-child(2) .vyt-trust__text,
	.vyt-trust__item:nth-child(3) .vyt-trust__text,
	.vyt-trust__item:nth-child(4) .vyt-trust__text {
		width: auto;
	}
}

/* The icon is 46px and the text starts 66px from the group's left edge, so the
   gap is 20px. Both are centred on each other - Matas: "the icons are supposed
   to have their bold text centred to them". */
.vyt-trust__item {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
}

.vyt-trust__icon {
	flex: 0 0 auto;
	display: block;
	width: 46px;
	height: 46px;
}

.vyt-trust__icon .vyt-icon {
	display: block;
	width: 46px;
	height: 46px;
}

.vyt-trust__text {
	display: flex;
	flex-direction: column;
}

/* node 1:708 - LORA 700 14/20 #111827. The comment here said Inter and so did
   the rule; the node says Lora, and it is the same treatment the four home-page
   feature titles get at the same size. */
.vyt-trust__title {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}

/* node 1:709 - Inter 400 12/16 #71717a, wrapping to two lines by design */
.vyt-trust__copy {
	margin-top: 2px;
	color: #71717a;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}

/* --- Product detail tabs (nodes 1:345 strip, 1:301 panel) -------------
   Replaces wp:woocommerce/product-details, whose tabs are the plugin's own
   Description / Additional information / Reviews with the plugin's markup. The
   design draws five tabs of the client's vocabulary over a two-column panel. */
.vyt-ptabs {
	margin-top: 48px;
}

/* node 1:345 - the strip is inset 48px from the panel below it (x=112 vs 64) */
.vyt-ptabs__strip {
	display: flex;
	align-items: flex-end;
	gap: 32px;
	padding-inline: 48px;
	/* node 1:346 - a 1px #e5e5e5 rule directly under the tabs */
	border-bottom: 1px solid #e5e5e5;
}

/* node 1:350 - Inter 500 12/16 #737373, in a 30px-tall hit area */
.vyt-ptabs__tab {
	appearance: none;
	position: relative;
	margin: 0;
	padding: 8px 0;
	border: 0;
	background: none;
	color: #737373;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	cursor: pointer;
	transition: color var(--wp--custom--transition);
}

.vyt-ptabs__tab:hover {
	color: var(--wp--preset--color--ink);
}

/* node 1:349 - the selected tab is 700 and the brand orange */
.vyt-ptabs__tab.is-active {
	color: #f54c2d;
	font-weight: 700;
}

.vyt-ptabs__tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: #f54c2d;
}

.vyt-ptabs__tab:focus-visible {
	outline: 2px solid #f54c2d;
	outline-offset: 2px;
}

/* node 1:301 - 1312x178 on the content column, #ffffff, 1px #e5e5e5. The copy
   starts 49px in (x=113 of 64) and the spec column sits at x=909. */
/*
 * COLUMN POSITIONS ARE THE DESIGN'S, not a proportional split. The panel's
 * content starts at x=113; the description runs 113..757 (node 1:302, 644 wide),
 * the rule sits at 820 (node 1:304) and the spec column starts at 885 (nodes
 * 1:314 onward) and ends at 1250. Built as 1fr + 341px the specs began at 1034 -
 * 149px right of where the design puts them.
 */
/*
 * THE PANEL IS A DETACHED BOX, 24px BELOW THE TAB RULE - it is not welded to it.
 * Node 1:346 draws the strip's hairline at y=795 and node 1:301 starts at y=819,
 * with a stroke on all FOUR sides. Built with `border-top: 0` and no margin the
 * two shapes touched, so the tab strip read as the lid of the panel and the
 * design's breathing room was gone. Same defect, same 24px, as the filter rail's
 * clear button - a gap that exists in the design and is zero in the build.
 */
.vyt-ptabs__panel {
	display: grid;
	grid-template-columns: minmax(0, 644px) minmax(0, 365px);
	justify-content: start;
	gap: 128px;
	min-height: 178px;
	margin-top: 24px;
	padding: 32px 48px;
	border: 1px solid #e5e5e5;
	background: #fff;
}

.vyt-ptabs__panel[hidden] {
	display: none;
}

/* node 1:302 - Inter 400 14/20 #525252 */
.vyt-ptabs__copy {
	max-width: 644px;
	color: #525252;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.vyt-ptabs__copy > p {
	margin: 0 0 12px;
}

.vyt-ptabs__copy > p:last-child {
	margin-bottom: 0;
}

.vyt-ptabs__empty {
	color: #a1a1aa;
	font-style: italic;
}

/* The right column: label left, value right, rows 32px apart (y=852/884/916/948) */
.vyt-ptabs__specs {
	margin: 0;
	align-self: start;
}

.vyt-ptabs__spec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	min-height: 16px;
	margin-bottom: 16px;
}

.vyt-ptabs__spec:last-child {
	margin-bottom: 0;
}

/* node 1:314 - Inter 600 12/16 #525b55, with its glyph (nodes 1:305-1:336) 16px
   wide sitting 8px to its left - the icons are at x=885 and the labels at 909. */
.vyt-ptabs__spec dt {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #525b55;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}

.vyt-ptabs__spec dt .vyt-icon {
	flex: none;
	width: 16px;
	height: 16px;
}

/* node 1:315 - Inter 500 12/16 #111827, right-aligned */
.vyt-ptabs__spec dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	text-align: right;
}

/* One column below the width the design specifies - a 341px spec rail beside a
   shrinking paragraph stops being readable well before it stops fitting. */
@media (max-width: 900px) {
	.vyt-ptabs__panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding-inline: 24px;
	}

	.vyt-ptabs__strip {
		padding-inline: 24px;
		gap: 20px;
		overflow-x: auto;
	}
}

/* --- Add to cart (node 1:242) -----------------------------------------
   496x38, radius 20, NO fill and a 1px #f54c2d stroke - an OUTLINE button, not
   the filled orange one this was built as. Label Inter 600 12 #1e293b with the
   13x15 cart glyph (node 1:243) BEFORE it, the pair centred as one group.
   Matas: "I krepseli doesnt have an icon, and its not centred in the button." */
/*
 * THE SELECTOR CARRIES `.woocommerce div.product ... form.cart button` ON PURPOSE.
 *
 * `woocommerce-blocktheme.css` sets `display: inline-block` on
 * `.woocommerce div.product form.cart button.single_add_to_cart_button` - three
 * classes and three elements - and a two-class theme rule loses to it. The
 * button was therefore NOT a flex container, so its ::before was an inline box,
 * so its width and height did nothing, so the shopping-bag icon rendered at zero
 * size and the button shipped with no icon at all. Matas found it; two rules and
 * a mask had been arguing about which glyph to draw while neither could draw
 * anything.
 *
 * Matching the plugin's own shape and adding this theme's class beats it on
 * specificity without `!important`, which would have worked and hidden why.
 */
.vyt-product__form .single_add_to_cart_button,
.woocommerce div.product .vyt-product__form form.cart button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* node 1:243 ends at 1105.5 and node 1:252 starts at 1114.5 - the bag sits
	   9px before the label, and 16 + 9 + 53 is the 78px block the design centres
	   in the 496px button. */
	gap: 8px;
	/* 496px is what the design draws, and 110 + 26 + 496 is EXACTLY the 632px
	   column - so any padding on the form pushes the button onto its own row.
	   Flexing to fill the remainder lands on 496 at the design's width and stays
	   on one row everywhere else, instead of wrapping at 631px and not at 632. */
	flex: 1 1 auto;
	min-width: 0;
	max-width: 496px;
	height: 38px;
	padding: 0 20px;
	border: 1px solid #f54c2d;
	border-radius: 20px;
	background: none;
	color: #1e293b;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	/* node 1:252 - 12/20, not 12/16. */
	line-height: 20px;
	text-align: center;
	transition: background var(--wp--custom--transition), color var(--wp--custom--transition);
}

/* The glyph is painted with an explicit #1E293B in the SVG rather than being
   inherited, per the project rule - it is a data URI here because WooCommerce
   renders this button and the theme cannot put PHP inside it. */

/* --- Checkout and cart: fields and the summary panel ------------------
   Nodes 1:922 / 1:930 / 1:956 / 1:960 (fields) and 1:814 (the summary card).

   Matas, review: "The text inputs are incredibly bad and not anything like how
   theyre supposed to be" and "the lines are not line dividers they look like
   containers with box radius. Incredibly bad."

   Both were the plugin's defaults showing through: a 50px white field with a 4px
   radius and a near-black 80%-opacity border where the design draws a 41px field
   with a 10px radius on #fcfdfd, and a BORDERED, ROUNDED box around the order
   summary where the design has two plain 1px rules.

   THE BLOCK-WRAPPER PREFIXES ARE LOAD-BEARING. WooCommerce scopes its field
   styles from .wp-block-woocommerce-checkout down, so a selector starting at
   .wc-block-components-text-input loses to it and the field stayed 50px with a
   4px radius. Third time this shape of bug has appeared today - it never looks
   like specificity, it looks like the CSS did not load.

   MEASURED, NOT GUESSED. Walking document.styleSheets for every rule that
   matches the field showed the winner: WooCommerce's checkout.css ships
   `.wc-block-components-form .wc-block-components-text-input input[type=...]`,
   two classes plus an element plus an attribute. Nothing shorter beats it, so
   the selector here starts from .wc-block-components-form too. */
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="number"],
.wc-block-components-form .wc-block-components-textarea,
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-address-form input,
.wp-block-woocommerce-checkout .wc-block-components-textarea,
.wp-block-woocommerce-checkout .wc-blocks-components-select__select,
.wp-block-woocommerce-cart .wc-block-components-text-input input,
.wp-block-woocommerce-cart .wc-block-components-textarea,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-address-form input,
.wc-block-components-textarea,
.wc-block-components-combobox input.components-combobox-control__input,
.wc-block-components-select .wc-blocks-components-select__select {
	height: 41px;
	min-height: 41px;
	padding: 0 16px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fcfdfd;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	line-height: 20px;
}

/*
 * THE ORDER NOTE IS A TEXTAREA IN A ONE-LINE BOX, and it was losing the height
 * half of this rule to the shared 41px field list above - so it rendered 41px
 * tall with `padding-block: 0`, which put its text hard against the top edge
 * while every input beside it was centred. Matas: "extra notes has english
 * default text and isnt centred, which you skipped over when we did the centring
 * pass". He is right that I skipped it: the centring pass only filled text
 * INPUTS, so the textarea was never in a state where the fault showed.
 *
 * `min-height` rather than `height`, so one line sits centred at the design's
 * 41px (node 1:969's box) and a longer note grows the field instead of scrolling
 * inside a box the size of a single line.
 */
.wc-block-components-form .wc-block-components-textarea,
.wp-block-woocommerce-checkout .wc-block-components-textarea,
.wp-block-woocommerce-cart .wc-block-components-textarea,
.wc-block-components-textarea {
	/*
	 * `field-sizing: content` is what makes ONE line look like the design's
	 * one-line box: WooCommerce writes `rows="2"`, so `height: auto` alone gives
	 * a 62px box with the text sitting in the top half of it, which is the
	 * "isnt centred" Matas saw. With content sizing the box is 41px for one line
	 * and grows with the note.
	 *
	 * Where it is unsupported (Firefox today) the rows attribute still applies
	 * and the field is simply taller - a fallback that is plain rather than
	 * broken, which is why there is no JavaScript here.
	 */
	field-sizing: content;
	height: auto;
	min-height: 41px;
	/*
	 * 12, NOT 8, AND THIS IS THE FOURTH REPORT OF IT. One 20px line with 8px
	 * above and below is 36px of content, and the 41px floor grows the box
	 * DOWNWARD - a min-height does not re-centre what is already in the box - so
	 * every previous fix moved the box and left the text sitting high in it.
	 * 12 + 20 + 12 is 44, which is the floor the tap-target pass gives this
	 * field on a phone, so the line lands on the middle of it instead.
	 */
	padding-block: 12px;
}

.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus,
.wc-block-components-textarea:focus {
	border-color: #f54c2d;
	box-shadow: none;
	outline: none;
}

/* The floating label the plugin animates into the border sits wrong in a 41px
   field, so the label is a plain caption above it - which is what the design
   draws (node 1:920 is a 66px "Textbox" holding a label AND a 41px field). */
/*
 * THE LABEL SITS ABOVE THE FIELD, NOT INSIDE IT - and this needed the plugin's
 * own selector shape, for the third time today.
 *
 * WooCommerce floats the label into the border with
 * `.wc-block-components-form .wc-block-components-text-input label { position:
 * absolute; transform: translateY(-50%) }`. A two-class rule here lost, so the
 * label stayed absolute - and on the country combobox the label "Šalis /
 * Regionas" and the value "Lietuva" were drawn ON TOP OF EACH OTHER.
 *
 * Every measurement of that field passed. It took looking at a screenshot of the
 * checkout to see it, which is the second time today that the only thing that
 * could catch a defect was a person looking at the page.
 *
 * The design draws a 66px "Textbox" (node 1:920) holding a caption ABOVE a 41px
 * field, so static is the correct position, not a workaround.
 */
.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-form .wc-block-components-text-input.is-active label,
.wc-block-components-form .wc-block-components-combobox label,
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label {
	/* THE ONLY PLACE THE FIELD LABEL IS DESCRIBED. A second rule further up the
	   file said 400 and #71717a - the design's values, node 1:921 - and lost to
	   this one, so the labels rendered 600 and near-black and the cockpit's
	   verify pass reported eight of them. The values moved here; the weaker copy
	   is gone. */
	position: static;
	transform: none;
	margin-bottom: 4px;
	padding: 0;
	color: var(--wp--preset--color--text-slate-soft);
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
}

/*
 * WooCommerce renders the INPUT FIRST and the LABEL AFTER IT, because its design
 * floats the label up into the border. Take the float away and the label falls
 * BELOW the field - which is what static positioning alone produced, still
 * overlapping.
 *
 * column-reverse puts the caption back on top without touching the markup, so
 * the field keeps the plugin's own DOM order and its label/for wiring.
 */
/*
 * NOT SCOPED TO `.wc-block-components-form`, and that scope was a real bug.
 *
 * The rule ABOVE that makes the label `position: static` is not scoped that way
 * - it matches every text input WooCommerce renders. This one was, so the coupon
 * field, which lives outside any form, got the un-floated label WITHOUT the
 * layout that puts it back above the input. Its label is inline and comes after
 * the input in the DOM, so it flowed to the RIGHT of the field and sat under the
 * "Pritaikyti" button: the stray "Įv" Matas photographed peeking out from behind
 * it.
 *
 * A rule and the rule that makes it safe have to have the same reach.
 */
.wc-block-components-text-input,
.wc-block-components-form .wc-block-components-text-input,
.wc-block-components-form .wc-block-components-combobox {
	display: flex;
	flex-direction: column-reverse;
	padding-top: 0;
}

.wc-block-components-form .wc-block-components-combobox label {
	margin: 0 0 4px;
}

.wc-block-components-text-input {
	padding-top: 0;
}

/* node 1:814 - the sidebar card is 486x812, #fcfdfd, radius 20, 1px #f3f4f6.
   Everything INSIDE it is separated by rules, not by nested cards. */
.wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-panel,
.wc-block-components-totals-wrapper {
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* nodes 1:892 and 1:817 - 428-wide 1px #e5e7eb rules, no radius, no fill */
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary__content + * {
	border-top: 1px solid #e5e7eb;
}

.wc-block-components-totals-wrapper:first-child {
	border-top: 0;
}

/* node 1:874 - 427x48 place-order pill, #f54c2d, radius 60 */
.wc-block-components-checkout-place-order-button {
	height: 48px;
	border-radius: 60px;
	background: #f54c2d;
}

/* --- Shop rail: collapse toggle, price slider, clear button ------------
   Nodes 1:581 / 1:684 / 1:607 / 1:636 (the four panels), 1:701-1:704 (the
   slider), 1:675 (the clear button).

   Matas, review: "Why is the Price slider completely different in the build
   site?", "Theres no Zuvies Rusis filter option and also no Clear filters
   button", "No expanding buttons for the filters as well?" */

/* The heading becomes the toggle: full width, chevron hard right (node 1:585
   sits at x=366 of an 85..382 inner width). */
.vyt-shop__rail .vyt-filter__toggle {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.vyt-shop__rail .vyt-filter__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
	border-radius: 4px;
}

/* node 1:589 - a 9x5 #71717a caret that points up once the panel is open */
.vyt-shop__rail .vyt-filter__toggle .vyt-icon {
	flex: none;
	width: 9px;
	height: auto;
	transition: transform var(--wp--custom--transition);
}

/*
 * ROTATED WHEN CLOSED, NOT WHEN OPEN. The glyph exported from node 1:589 is the
 * caret the design draws on an EXPANDED panel, so rotating it on expand pointed
 * it the wrong way in exactly the state the design specifies. The collapsed
 * state is the one the design is silent about, so that is the one that flips.
 */
.vyt-shop__rail .vyt-filter__toggle[aria-expanded="false"] .vyt-icon {
	transform: rotate(180deg);
}

/* Collapsing hides the body and the rule under the heading with it, so a folded
   panel is a single row rather than a heading over an empty bordered box. */
.vyt-shop__rail .is-collapsed .vyt-filter__body {
	display: none;
}

.vyt-shop__rail .is-collapsed .vyt-filter__title {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* --- Price slider (nodes 1:695-1:704) ---------------------------------
   The design puts the two value boxes ABOVE the track; WooCommerce's own grid
   puts them below. Reordering the named areas is the whole change - the plugin
   keeps owning the values, the min/max clamping and the query. */
.vyt-shop__rail .wc-block-product-filter-price-slider__content {
	grid-template-areas:
		"left-input middle-input right-input"
		"price-slider price-slider price-slider";
	row-gap: 16px;
}

/* nodes 1:695 / 1:698 - 102x29, #fafafa, radius 10, 1px #e4e4e7 */
.vyt-shop__rail .wc-block-product-filter-price-slider__left,
.vyt-shop__rail .wc-block-product-filter-price-slider__right {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 102px;
	height: 29px;
	padding-inline: 8px;
	border: 1px solid #e4e4e7;
	border-radius: 10px;
	background: #fafafa;
}

.vyt-shop__rail .wc-block-product-filter-price-slider__left input,
.vyt-shop__rail .wc-block-product-filter-price-slider__right input {
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink-slate);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
}

/* node 1:701 - a 297x6 #e4e4e7 track, radius 3, with the selected span in
   #1e293b (node 1:702). --range-color is the plugin's own variable. */
.vyt-shop__rail .wc-block-product-filter-price-slider__range {
	--range-color: #1e293b;

	position: relative;
	height: 6px;
	border-radius: 3px;
	background: #e4e4e7;
}

/* node 1:702 - the SELECTED span, 233 of the 297px track, #1e293b. The plugin
   renders an empty .range-bar for it and leaves it transparent, so the track
   read as one flat grey line with no indication of the chosen range. */
.vyt-shop__rail .wc-block-product-filter-price-slider__range .range-bar {
	position: absolute;
	top: 0;
	left: var(--low, 0%);
	right: calc(100% - var(--high, 100%));
	height: 6px;
	border-radius: 3px;
	background: #1e293b;
}

/* nodes 1:696 / 1:699 - the boxes read "Nuo 3" and "Iki 20". WooCommerce renders
   only the number and the currency, so the two words are added here. They are
   static labels, not content: the value stays the plugin's. */
.vyt-shop__rail .wc-block-product-filter-price-slider__left::before,
.vyt-shop__rail .wc-block-product-filter-price-slider__right::before {
	flex: none;
	color: var(--wp--preset--color--text-slate);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}

.vyt-shop__rail .wc-block-product-filter-price-slider__left::before {
	content: "Nuo";
}

.vyt-shop__rail .wc-block-product-filter-price-slider__right::before {
	content: "Iki";
}

/* nodes 1:693 / 1:694 - the track's absolute bounds, Inter 500 12/16, under the
   slider. Written by assets/js/filters.js from the range inputs' own min and
   max, so they can never disagree with the control. */
.vyt-shop__rail .vyt-price-bounds {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	/* nodes 1:693 / 1:694 - #71717a, a step back from the values in the boxes
	   above them, which are #1e293b. They are captions, not readings. */
	color: var(--wp--preset--color--text-slate-soft);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

/*
 * nodes 1:703 / 1:704 - 14x14 SOLID #1e293b handles, radius 7, on a white ring.
 *
 * The thumb belongs to the range INPUTS, which are children of __range - the
 * previous rule put ::-webkit-slider-thumb on the wrapper div, where it matches
 * nothing, so the handles kept the browser's default and rendered as hollow
 * white circles. A visual pass called them "the wrong shape", which is exactly
 * what an unstyled thumb looks like next to a solid dot.
 */
.vyt-shop__rail .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 14px;
	height: 14px;
	border: 2px solid #fff;
	border-radius: 7px;
	background: #1e293b;
	box-shadow: 0 0 0 1px #e4e4e7;
	cursor: pointer;
	pointer-events: auto;
}

.vyt-shop__rail .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 2px solid #fff;
	border-radius: 7px;
	background: #1e293b;
	box-shadow: 0 0 0 1px #e4e4e7;
	cursor: pointer;
	pointer-events: auto;
}

/* nodes 1:693 / 1:694 - the €3 and €30 bounds, Inter 500 12/16 */
.vyt-shop__rail .wc-block-product-filter-price-slider__content + * {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	/* nodes 1:693 / 1:694 - #71717a, a step back from the values in the boxes
	   above them, which are #1e293b. They are captions, not readings. */
	color: var(--wp--preset--color--text-slate-soft);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

/* --- Clear filters (node 1:675) ---------------------------------------
   339x42, white, radius 20, 1px #e4e4e7, a 9px glyph after the label. The
   design draws it ALWAYS, so blocks/filter-clear/render.php renders it always -
   see that file for why the plugin's own conditional block was dropped. */
/* node 1:675 - 339x42, white on a 1px #e4e4e7 edge, radius 20, label Inter 500
   14/22 #3f3f46 with the 9px X glyph 9px after it. The panel edges above are
   #e8e6e1; this one is #e4e4e7 in the design and they are not the same colour. */
.vyt-shop__rail .vyt-filter__clear {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 42px;
	padding: 0 20px;
	border: 1px solid var(--wp--preset--color--line-zinc);
	border-radius: 20px;
	background: var(--wp--preset--color--base);
	color: #3f3f46;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	text-decoration: none;
	transition: border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.vyt-shop__rail .vyt-filter__clear .vyt-icon {
	width: 9px;
	height: auto;
}

.vyt-shop__rail .vyt-filter__clear:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

/* node 1:425 - one text node, two character styles: the words are Plus Jakarta
   Sans 400 #71717a and the NUMBERS are overridden to Inter 600 #272729. The
   face changes with them, which the first pass missed because a character-level
   override does not appear in the node's own style block. */
.vyt-shop__count-num {
	color: #272729;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
}

/* --- Shop category bar (nodes 1:787 rule, 1:382 / 1:399 / 1:412 pills) --
   A horizontal row of category pills between the hero and the product grid.
   It is NOT the rail's Kategorijos checkbox list - the design draws both, and
   this one was never built. */
.vyt-catbar {
	/* node 1:787 - a full-bleed 1px rule at y=320, with the pills 23px below it */
	padding-block: 24px 0;
	border-top: 1px solid var(--wp--preset--color--line-warm);
}

.vyt-catbar__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* node 1:399 - 42px tall, radius 20, white on a 1px #e8e6e1 edge, label
   Inter 500 14 #3f3f46 with a 16px glyph 9px before it. */
.vyt-catbar__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding-inline: 20px;
	border: 1px solid var(--wp--preset--color--line-warm);
	border-radius: 20px;
	background: var(--wp--preset--color--base);
	color: #3f3f46;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	text-decoration: none;
	transition: border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.vyt-catbar__pill:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
}

.vyt-catbar__pill .vyt-icon {
	flex: none;
	width: 16px;
	height: 16px;
}

/* node 1:382 - the current category is 40px tall on #f54c2d with a white label.
   THE ICON RECOLOURS WITH THE STATE, which is the one place in this theme an
   icon's colour is not read straight from its own node. It is the same glyph in
   the design, drawn white when its pill is active and #3f3f46 when it is not -
   a state, not a different icon. The social icons are the opposite case and get
   their own files. */
.vyt-catbar__pill.is-active {
	height: 40px;
	border-color: transparent;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
}

.vyt-catbar__pill.is-active .vyt-icon path,
.vyt-catbar__pill.is-active .vyt-icon circle,
.vyt-catbar__pill.is-active .vyt-icon rect {
	fill: #fff;
}

/* nodes 1:216 "Pasirinkite kiekį" and 1:223 "Kiekis" - the two captions above
   the weight pills and the quantity stepper. Inter 600 12/16, and both were
   simply missing; verify reported them as absent design elements. */
.vyt-product__choose,
.vyt-qty__caption {
	display: block;
	margin-bottom: 8px;
	color: var(--wp--preset--color--ink-slate);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}

/* node 1:215 - the hairline between the price and the weight caption. The
   caption owns it because the caption is what comes after it. */
.vyt-product__choose {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--line-warm);
}

/* The stepper's caption has to escape the flex row the pill and button share,
   or it becomes a third item beside them instead of a line above. */
.vyt-product__form .woocommerce-variation-add-to-cart,
.vyt-product__form form.cart:not(.variations_form) {
	flex-wrap: wrap;
}

.vyt-qty__caption {
	flex: 0 0 100%;
	margin-bottom: 0;
}


/* The order summary's line item, node 1:891 - image, name, weight, price. There
   is NO product description in the design's summary, and WooCommerce renders the
   short description there; with a real catalogue that is a paragraph per line
   item inside a 486px card. Hidden rather than restyled.

   The design's "~300 g" line is variation data, which WooCommerce renders for a
   variable product and has nothing to render for a simple one. Not reachable
   from CSS for simple products - noted rather than faked.

   THE CART GETS THE SAME TREATMENT even though the Figma file has no cart frame
   to be faithful to. The two panels are the same panel a step apart, and the
   fixture description is already two wrapped lines per item at 60 characters -
   a real one is a paragraph. Consistency with the panel the design DOES specify
   is a better answer than leaving them different because nobody drew one. */
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description,
.wc-block-cart-item__wrap .wc-block-components-product-metadata__description {
	display: none;
}


/* --- The country / region select (node 1:940) -------------------------
   A DIFFERENT COMPONENT with a different class prefix - wc-BLOCKS-components-
   select, not wc-BLOCK-components-text-input - so none of the field rules above
   reached it. Its label stayed absolutely positioned at top:6px and drew ON TOP
   OF the value: "Šalis / Regionas" and "Lietuva" overlapping in the same box.

   Every measurement of that field passed; it took looking at a screenshot of the
   checkout to see it. */
/*
 * COLUMN, NOT COLUMN-REVERSE - and the difference is the whole bug.
 *
 * The text inputs render INPUT then LABEL, so they need reversing. This select
 * renders LABEL then SELECT already. Reversing it too - which is what I assumed,
 * because both are "a WooCommerce field" - put the caption underneath the box.
 * Two components with the same job and opposite DOM order.
 *
 * Two classes to outrank the plugin's own rule on the same element.
 */
.wc-blocks-components-select .wc-blocks-components-select__container,
.wc-blocks-components-select__container {
	display: flex;
	flex-direction: column;
	border: 0;
	background: none;
}

/* Two classes, matching the plugin's own
   `.wc-blocks-components-select .wc-blocks-components-select__label`. A single
   class lost to it - which is the fourth time today, and the second time AFTER
   I wrote the CSSOM check into the README rather than using it. */
.wc-blocks-components-select .wc-blocks-components-select__label,
.wc-blocks-components-select__label {
	/* Same values as the text-input label above it - "Šalis" is a field caption
	   like every other one, and it was the only one still rendering 600 and
	   near-black after the labels were consolidated. */
	position: static;
	transform: none;
	margin: 0 0 4px;
	padding: 0;
	color: var(--wp--preset--color--text-slate-soft);
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
}

.wc-blocks-components-select__select {
	height: 41px;
	min-height: 41px;
	padding: 0 16px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fcfdfd;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
}

.wc-blocks-components-select__expand {
	top: auto;
	bottom: 13px;
}


/* node 1:304 - a 1px #f5f5f5 rule at x=820 separating the description column from
   the spec column inside the tab panel. Absent from the build, so the two columns
   ran together with only the gap between them. */
/* node 1:304 - the rule sits at x=820, which is 65px before the spec column's
   own 885. */
.vyt-ptabs__panel:not([hidden]) .vyt-ptabs__specs {
	border-left: 1px solid #f5f5f5;
	padding-left: 64px;
	margin-left: -65px;
}

/* The textarea's native resize grip is not in the design (node 1:1902) and it
   lets a visitor drag the contact form out of its own card. */
.vyt-form textarea,
.wc-block-components-textarea,
textarea.vyt-field__input {
	resize: none;
}


/* node 1:426 - the sort control is a 306x34 white pill holding "Rūšiuoti pagal:"
   and its value, and nothing else. The browser's native select arrow is not in
   the design, and next to a label that already reads as a control it just makes
   the pill look like a form field. */
.vyt-shop__sort select.orderby {
	appearance: none;
	background-image: none;
	padding-right: 0;
}


/* node 1:292 - a 36x36 white disc, radius 18, inset 17px from the frame's top
   and 17px from its right (the frame runs 64..682 and the button sits at 629,
   161 against an image starting at y=148). */
.vyt-product__gallery-zoom {
	position: absolute;
	top: 13px;
	right: 17px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 18px;
	background: #fff;
	transition: transform var(--wp--custom--transition);
}

.vyt-product__gallery-zoom .vyt-icon {
	width: 16px;
	height: 16px;
}

.vyt-product__gallery-zoom:hover {
	transform: scale(1.06);
}

.vyt-product__gallery-zoom:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* ======================================================================
   ATSISKAITYMAS - the pass that made the page follow node 1:813
   ======================================================================

   Matas, 2026-08-28: "Like it was built from scratch and nowhere near the
   design. Doesnt even look like it took inspiration."

   He was right, and the reason is worth writing down: everything above this
   point styled WooCommerce's checkout PIECE BY PIECE - a colour here, a font
   size there - and never once compared the finished column against the frame.
   Each rule was defensible on its own and the page was not. What follows is the
   frame's own geometry, read out of the Figma node rather than off a screenshot,
   and grouped so the next person can see what belongs to what.

   WHERE THE DESIGN CONTRADICTS ITSELF, THE MAJORITY WINS AND IT IS SAID SO.
   Three section headings drawn three ways, two field treatments, dividers 32px
   and 17px below the same kind of rule. Copying each value exactly is what made
   the spacing look random - which is the other half of what he reported. */

/* --- "Pirkėjo informacija" (nodes 1:916 / 1:917) ---------------------- */

.vyt-checkout-head {
	padding-top: 40px;
}

/* Node 1:915 is 753 wide, not 1312 - the rule belongs to the form column and
   stops where it stops. On the shell itself it would have run the whole page
   width, because the shell IS the gutter. */
.vyt-checkout-head__inner {
	max-width: 753px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.vyt-checkout-head__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.75px;
	line-height: 36px;
}

.vyt-checkout-head__note {
	margin: 8px 0 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 16px;
}

/* The heading owns the 40px under the progress bar, so the checkout block below
   starts at the design's 32px gap under the rule instead of repeating it. */
.wp-block-woocommerce-checkout {
	padding-top: 32px;
}

/* WooCommerce prints the same sentence under the email field. It is the page
   heading's note now, and twice is once too many. */
.wp-block-woocommerce-checkout .wc-block-checkout__guest-checkout-notice {
	display: none;
}

/* --- One rule between sections, one rhythm around it ------------------
   The design draws a hairline above "Pristatymo adresas" (node 1:943) and above
   "Apmokėjimo būdas" (node 1:980) and leaves 32px under the first and 17px under
   the second. 32 both ways; the odd one is a nudged frame, not a decision. */

.wp-block-woocommerce-checkout .wc-block-components-checkout-step ~ .wc-block-components-checkout-step {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* 16px under a section heading, once. WooCommerce already puts 16px on the
   heading's CONTAINER, so setting it again on the heading inside made 32 - which
   is the sort of doubling that made the spacing read as arbitrary. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading {
	margin-bottom: 0;
}

/* --- The address grid (nodes 1:920 - 1:978) ---------------------------
   Fields pair two to a row on a 12px gutter, and a field alone on its row grows
   to fill it. WooCommerce spaces its rows with per-field margins; those are
   zeroed so the one gap value here is the only thing setting the rhythm. */

.wp-block-woocommerce-checkout .wc-block-components-address-form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.wp-block-woocommerce-checkout .wc-block-components-address-form > * {
	margin-top: 0;
}

/* Telefono numeris and Gatvė get their own row in the design. Everything else
   pairs up on its own, from the order set in vytintas_address_field_order(). */
.wp-block-woocommerce-checkout .wc-block-components-address-form__phone,
.wp-block-woocommerce-checkout .wc-block-components-address-form__address_1,
.wp-block-woocommerce-checkout .wc-block-components-address-form__email {
	flex: 0 0 100%;
}

/* The design marks every required field with an asterisk (nodes 1:921, 1:929,
   1:955 ...). WooCommerce marks the OPTIONAL ones instead, and puts nothing on
   the required ones - so the build showed no required marker anywhere.

   :has() is what makes this reachable: the label is a SIBLING of the input, so
   without it there is no way to ask "is the field this label belongs to
   required?" from CSS. */
.wp-block-woocommerce-checkout .wc-block-components-text-input:has( input:required ) label::after,
.wp-block-woocommerce-checkout .wc-blocks-components-select:has( select:required ) .wc-blocks-components-select__label::after {
	content: " *";
}

/* --- Papildoma informacija (node 1:966) -------------------------------
   The design draws an open field with a placeholder; WooCommerce draws a
   checkbox that reveals one. The checkbox is React's, so it is TICKED by
   assets/js/checkout.js and then hidden - and hidden only once the script has
   ticked it, which is what `.vyt-note-open` on the block means.

   THAT ORDER IS THE WHOLE POINT. Hiding the checkbox from CSS alone would take
   the note field away from anyone whose JavaScript did not run, because the
   textarea does not exist until the box is ticked. This way the worst case is
   the checkout the build had yesterday. */
/* Hide the BOX, keep its LABEL. The textarea is a SIBLING of the checkbox inside
   `__add-note`, so hiding that wrapper hid the field as well - which is what the
   first version of this rule did and it took a DOM read to see. What is left is
   the checkbox's own <span>, a real translatable element (the string is changed
   to the design's "Papildoma informacija (nebūtina)" in inc/i18n-blocks.php)
   standing in for the field label WooCommerce never renders. Its <label> is made
   inert so a stray click cannot toggle the now-invisible box shut. */
.wp-block-woocommerce-checkout .wc-block-checkout__order-notes.vyt-note-open .wc-block-components-checkbox__input,
.wp-block-woocommerce-checkout .wc-block-checkout__order-notes.vyt-note-open .wc-block-components-checkbox__mark {
	display: none;
}

.wp-block-woocommerce-checkout .wc-block-checkout__order-notes.vyt-note-open .wc-block-components-checkbox label {
	display: block;
	margin: 0 0 4px;
	padding: 0;
	pointer-events: none;
}

/* 12px, the same as every other field label (node 1:921), not the 13px `sm`
   step. It is standing in for a field label, so a one-pixel difference from the
   eight labels above it is just a difference. */
.wp-block-woocommerce-checkout .wc-block-checkout__order-notes.vyt-note-open .wc-block-components-checkbox__label {
	color: var(--wp--preset--color--text-slate-soft);
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
}

/* The note is the last field of the ADDRESS group in the design, not a section
   of its own, so it does not get the rule that separates sections - the next
   rule down belongs to "Apmokėjimo būdas". */
.wp-block-woocommerce-checkout .wc-block-checkout__order-notes.wc-block-components-checkout-step {
	margin-top: 12px;
	padding-top: 0;
	border-top: 0;
}

/*
 * THIS IS THE RULE THAT KEPT WINNING, and that is why the note field has been
 * reported four times.
 *
 * Three classes, so every previous attempt - all of them written against the
 * two-class `.wc-block-components-form .wc-block-components-textarea` further up
 * - lost to it silently and the text went on sitting high in the box. Found by
 * walking `document.styleSheets` and reading the winner, which is the README's
 * first gotcha and the thing I should have done the first time.
 *
 * 12, not 8: a 20px line with 12px above and below is exactly the 44px floor the
 * field has on a phone, so the line lands on the middle of the box instead of
 * the min-height growing it downward and leaving the slack underneath.
 */
.wp-block-woocommerce-checkout .wc-block-checkout__order-notes .wc-block-components-textarea {
	min-height: 41px;
	padding: 12px 16px;
}

/* --- Apmokėjimo būdas, with no gateway configured --------------------
   WooCommerce says "no payment methods" in its ERROR banner - a red-bordered box
   with an alert glyph, which reads as something the shopper has broken. Nothing
   is broken; the shop is being set up (Q11). Same words, said as information.

   This disappears the day a gateway is switched on, and the four method cards
   above take over. */
.wp-block-woocommerce-checkout .wc-block-checkout__no-payment-methods-notice {
	margin: 0;
	padding: 16px;
	border: 1px solid var(--wp--preset--color--line-zinc);
	border-radius: var(--wp--custom--radius--card);
	background: #fcfdfd;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
}

.wp-block-woocommerce-checkout .wc-block-checkout__no-payment-methods-notice > svg {
	background: none;
	fill: var(--wp--preset--color--text-faint);
}

/* --- The terms line (node 1:989's neighbour) -------------------------- */

.wp-block-woocommerce-checkout .wc-block-checkout__terms {
	margin-top: 32px;
	padding-top: 0;
	border-top: 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 16px;
}

.wp-block-woocommerce-checkout .wc-block-checkout__terms .wc-block-components-checkbox__label {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 16px;
}

/*
 * THE CONSENT CHECKBOX SITS 2px ABOVE ITS OWN TEXT, and the rule right above
 * this one is why. Found 2026-10-21, the moment the checkbox was turned on for
 * Paysera.
 *
 * WooCommerce lays the control out as `align-items: flex-start` with a 20px box
 * against a 20px label line-height, so the first line of text lines up with the
 * box by construction. The rule above forces the label to 16px - correct for
 * the plain SENTENCE this block used to render, four pixels short of the
 * control now that there is one. With flex-start the box's centre sits 10px
 * from the top and the text's centre sits 8px, so the text rides 2px high.
 * That is exactly the offset visible on the pay screen.
 *
 * Matching the control's height is the fix rather than `align-items: center`,
 * which would look right on one line and wrong the moment the sentence wraps -
 * it would centre a 20px box against two or three lines of text and float it in
 * the middle of the paragraph. On a phone this line always wraps.
 *
 * Scoped to the checkbox wrapper, which only exists when the checkbox is on, so
 * the plain-sentence variant keeps its tighter 16px legal-print setting.
 */
.wp-block-woocommerce-checkout .wc-block-checkout__terms .wc-block-components-checkbox .wc-block-components-checkbox__label {
	line-height: 20px;
}

/* --- The summary rows (nodes 1:891 - 1:913) ---------------------------
   64px picture, 12px gap, name and weight stacked tight against the top of it,
   line price vertically centred. The build had the name 24px from the picture,
   the weight 51px below the name at the BOTTOM of a 72px row, and the price
   pinned to the top - three things floating in a box, which is what made the
   column look loose next to the design's. */

/* WooCommerce insets the item list 16px inside a card that is already padded, so
   the thumbnail sat 17px right of everything under it. Node 1:896 puts it flush
   with the card's inner edge. */
.wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel {
	padding-inline: 0;
}

/* THE PICTURE SETS THE ROW HEIGHT, and the row is 64px whatever is beside it.
   Centring the row instead let a two-line product name make the row 67px tall
   and push the picture 8px below the name it belongs to - so the rhythm between
   rows drifted with the length of the names in the cart. */
.wc-block-components-order-summary-item {
	align-items: flex-start;
	min-height: 64px;
	padding: 0;
	border: 0;
}

/* The line price is centred against the picture (node 1:893), not against the
   name, which is why it is the one thing here that does not start at the top. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
	align-self: center;
}

.wc-block-components-order-summary-item + .wc-block-components-order-summary-item {
	margin-top: 16px;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
	padding: 0 12px;
	align-self: flex-start;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	margin: 0;
	padding-top: 12px;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
	margin: 3px 0 0;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
	padding: 0;
}

/* A hairline under the items, then the totals on the design's 24px rhythm
   (nodes 1:892, 1:817). */
.wp-block-woocommerce-checkout-order-summary-cart-items-block {
	padding: 0 0 16px;
	border-bottom: 1px solid var(--wp--preset--color--line-zinc);
}

/* --- The way back (node 1:890) ---------------------------------------- */

.wc-block-checkout__sidebar .vyt-checkout-back {
	margin-top: 32px;
}

/* --- The checkout stacked (no design; derived) -------------------------
   The Figma file draws one 1440px frame, so everything below the two-column
   breakpoint is this build's own reading of it. Fields go full width: paired at
   half of 350px they were 200px wide with 150px of the row unused, which is the
   sort of thing that reads as broken rather than as narrow. */

@media ( max-width: 767px ) {
	.wp-block-woocommerce-checkout .wc-block-components-address-form > * {
		flex: 0 0 100%;
	}

	.wp-block-woocommerce-checkout {
		padding-top: 24px;
	}

	.vyt-checkout-head {
		padding-top: 32px;
	}
}

/* ======================================================================
   UŽSAKYMO PATVIRTINIMAS - the page after the order is placed
   ======================================================================

   THERE IS NO FIGMA FRAME FOR THIS PAGE. The file has seven and none of them is
   an order confirmation, so everything here is the checkout's own language
   applied to WooCommerce's confirmation blocks - the same 4px grid, the same
   section headings, the same card.

   IT WAS NEVER LOOKED AT BEFORE 2026-08-28. It is the page a customer lands on
   after paying, and it was rendering WooCommerce's raw blocks FLUSH TO THE
   BROWSER EDGE, on the default page template, with no progress bar - the one
   step of the checkout the build had never opened. Reaching it needs an order,
   which needs a gateway, which is why it stayed invisible: a payment method was
   switched on locally for a moment to place one and switched off again in the
   same run. */

/* The confirmation blocks are `alignwide`, and wide-size is the full 1440 - so
   without a gutter here they run edge to edge. Same box as the checkout. */
.vyt-confirm {
	max-width: calc(1312px + (2 * var(--wp--custom--gutter)));
	margin-inline: auto;
	padding: 40px var(--wp--custom--gutter) 96px;
}

.vyt-confirm > * {
	max-width: 100%;
}

/* The status block prints a heading AND a sentence saying the same thing. Both
   stay - the heading names the page, the sentence is what a person reads - but
   they are sized as a title and a lead rather than as two headings. */
.wc-block-order-confirmation-status h1,
.wc-block-order-confirmation-status h2 {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.75px;
	line-height: 36px;
}

.wc-block-order-confirmation-status p {
	margin: 8px 0 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--base);
	line-height: 22px;
}

/* The order's facts, as one card rather than five columns of loose text. */
.wc-block-order-confirmation-summary {
	margin: 32px 0 0;
	padding: 24px 28px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: #fcfdfd;
}

.wc-block-order-confirmation-summary-list {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-order-confirmation-summary-list-item {
	margin: 0;
}

.wc-block-order-confirmation-summary-list-item__key {
	display: block;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	line-height: 16px;
}

.wc-block-order-confirmation-summary-list-item__value {
	display: block;
	margin-top: 4px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	line-height: 22px;
}

/* Section headings, the checkout's (Lora 700 16/24). WooCommerce ships these as
   patterns, so they arrive as ordinary h2s at the theme's display size. */
.vyt-confirm h2,
.vyt-confirm h3 {
	margin: 32px 0 12px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 24px;
}

/* The line items. WooCommerce draws a full-grid table; this is the summary
   column's language instead - hairlines between rows and nothing around them. */
.wc-block-order-confirmation-totals__table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-collapse: collapse;
	border-radius: var(--wp--custom--radius--card);
	border-spacing: 0;
	background: #fcfdfd;
	overflow: hidden;
}

.wc-block-order-confirmation-totals__table th,
.wc-block-order-confirmation-totals__table td {
	padding: 16px 28px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line-zinc);
	font-size: var(--wp--preset--font-size--base);
	line-height: 22px;
	text-align: left;
}

.wc-block-order-confirmation-totals__table thead th {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 16px;
	text-transform: none;
}

.wc-block-order-confirmation-totals__table .wc-block-order-confirmation-totals__total,
.wc-block-order-confirmation-totals__table td:last-child,
.wc-block-order-confirmation-totals__table th:last-child {
	text-align: right;
}

.wc-block-order-confirmation-totals__table tbody a {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-decoration: none;
}

.wc-block-order-confirmation-totals__table tfoot th,
.wc-block-order-confirmation-totals__table tfoot td {
	border-bottom: 0;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

/* The addresses. The shipping column renders nothing today - no shipping method
   is configured (Q2) - and appears on its own the day one is. */
.wc-block-order-confirmation-address-wrapper {
	gap: 24px;
	margin: 0;
}

/* THE CARD IS THE WRAPPER, NOT THE <address>. WooCommerce renders the phone as a
   SIBLING of the address element, so a card drawn on <address> left the phone
   number outside it - and the wrapper draws a faint border of its own, so the
   page showed a box inside a box with the phone between them. */
.wc-block-order-confirmation-billing-address,
.wc-block-order-confirmation-shipping-address,
.wc-block-order-confirmation-additional-fields {
	margin: 0;
	padding: 24px 28px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: #fcfdfd;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--base);
	font-style: normal;
	line-height: 22px;
}

.wc-block-order-confirmation-address-wrapper address {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

.wc-block-order-confirmation-address-wrapper .woocommerce-customer-details--phone {
	margin: 8px 0 0;
}

/* Whatever the gateway wants to say - for a bank transfer that is the account to
   pay into, which is the most important thing on the page when it exists. */
.wc-block-order-confirmation-additional-information {
	margin: 32px 0 0;
}

.vyt-confirm__back {
	margin-top: 48px;
	justify-content: flex-start;
}

/* The email-verification form, which is what a returning customer meets when
   they reopen the confirmation link without the session that placed the order.
   WooCommerce renders a bare input here, outside every selector the checkout's
   field styling uses, so it arrived as the browser's default box. */
.woocommerce-verify-email input[type="email"] {
	display: block;
	width: 100%;
	max-width: 371px;
	height: 41px;
	padding: 0 16px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fcfdfd;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	line-height: 20px;
}

.woocommerce-verify-email input[type="email"]:focus {
	border-color: var(--wp--preset--color--brand);
	box-shadow: none;
	outline: none;
}

.woocommerce-verify-email label {
	display: block;
	margin-bottom: 4px;
	color: var(--wp--preset--color--text-slate-soft);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	line-height: 20px;
}

.woocommerce-verify-email .form-row {
	margin: 16px 0 0;
}

.woocommerce-verify-email .required {
	color: inherit;
	text-decoration: none;
}

/* ======================================================================
   MOBILUS RODINYS - the phone pass, 2026-08-28
   ======================================================================

   THERE IS NO MOBILE DESIGN. The agency's Figma files are desktop-only and this
   one draws seven 1440px frames, so nothing below that width can be checked
   against anything. Everything here is judgement, and the standard it is judged
   against is the desktop build's own language applied consistently.

   ONE PHONE BREAKPOINT: 782. It is not a number anybody would choose from
   scratch - it is WordPress's admin-bar breakpoint and it got into this file by
   accident - but it was already the de-facto phone breakpoint for every theme
   component, so the cheap and honest move was to make everything else agree with
   it rather than introduce an eleventh number. The cart and checkout used to
   stack at 735 (WooCommerce's own container query, measured) and switch columns
   at 768 (ours); both now happen at 782.

   WHY THE FIXES BELOW EXIST AT ALL, in one sentence each, because the pattern
   repeats: a width measured off a 1440px frame and written as a fixed number is
   correct at 1440 and is a bug at 390, and it is invisible to every check this
   repo has - `align-sweep` reports clean because a too-narrow column does not
   overflow anything, and `text-compare` has no 390px frame to compare against.
   All of it was found by looking at screenshots.

   NOT DONE HERE, deliberately: the footer is NOT centred on the phone. Mobile
   layouts do centre more than desktop ones, and the slack was real - the logo
   had 284px of empty space to its right - but four link lists, a form and three
   contact rows read worse centred, and a centred footer under a left-aligned
   page is the only centred block on the screen. The actual faults were that the
   newsletter form did not fill its column and the social icons were the one
   right-aligned thing in a left-aligned stack. Those are fixed; the alignment
   is not changed. */

@media ( max-width: 782px ) {

	/* --- Things that were a measured width and should be a measure ------- */

	/* Four sentences hand-set to 174/169/186/157 in the design, unified to a
	   184px measure that reproduces all twelve of the design's line breaks - and
	   at 390 leaves the copy 62px short of the card's right edge while indented
	   40px from its left, which reads as a paragraph nudged off centre. */
	.vyt-story__feature p {
		max-width: none;
	}

	/* 260px inside a 350px column: the one element in the footer that stopped
	   short of the edge, and the send button therefore floated in the middle of
	   the row rather than at the end of the field. */
	/* NO CEILING. A 360px cap was tried and it just moved the fault: at 430 the
	   field stopped 30px short of a 390px column, which is the same "flush with
	   slack beside it" this section exists to remove. Below 782 the footer is a
	   single column, so a field that fills it is consistent with everything else
	   in that column rather than a control that failed to stretch. */
	.vyt-newsletter {
		width: 100%;
		max-width: none;
	}

	/* 40px field, 30x28 send button. The field goes to 48 so the button can be
	   36 and still sit centred in it, and the button's hit overlay does the
	   rest - node 1:1286's pill is a design for a pointer. */
	.vyt-newsletter__input {
		height: 48px;
	}

	.vyt-newsletter__submit {
		top: 6px;
		width: 36px;
		height: 36px;
	}

	/* 166px and 233px are the widths of two footer columns in a five-column
	   band. Stacked into one 350px column they were just ceilings: the tagline
	   broke to three lines with 184px of empty space beside it, and the
	   newsletter line to two with 117px. */
	.vyt-footer__tagline,
	.vyt-footer__newsletter-text {
		max-width: none;
	}

	/* The sort control is the shop toolbar's only control on a phone, so it
	   takes the row. At its 306px basis it sat 44px short of the right edge with
	   nothing beside it, which reads as a control that failed to stretch.
	   FLEX, NOT WIDTH: it is a flex item of the toolbar, so its 306px basis wins
	   over any `width` - the same class of mistake as a flex-basis that becomes
	   a height once a layout stacks. */
	.vyt-shop__sort {
		flex: 1 1 100%;
	}

	.vyt-shop__sort .woocommerce-ordering,
	.vyt-shop__sort .vyt-menu,
	.vyt-shop__sort .vyt-menu__button {
		width: 100%;
	}

	/* 460px of photograph, absolutely positioned against the right edge of a
	   350px panel, at 35% opacity. It cannot be seen and it cannot be sized -
	   it was the only box on the site whose width was identical at 360 and 390. */
	.vyt-gift__media {
		width: 100%;
	}

	/* --- Wrapping ------------------------------------------------------- */

	/* The line break is the designer's and it is right at 1440. At 390 it makes
	   a five-line heading with "su" alone on the third: "Dovanų / rinkiniai - /
	   su / meile ir / skoniu". Let the copy find its own breaks. */
	.vyt-giftband__title br {
		display: none;
	}

	.vyt-giftband__title {
		font-size: 30px;
		line-height: 36px;
	}

	/* --- Gaps that were a column gutter and became nothing --------------- */

	/* Two columns of a grid have a gutter between them; one column has none, so
	   "Skaityti daugiau" sat directly on top of the first feature's title with
	   no space at all between them. */
	.vyt-story__panel {
		row-gap: 32px;
	}

	/* --- Cards sized for a four-across row ------------------------------- */

	/* 256px was the height of a card in a four-across row. Stacked, each of the
	   four contact cards held three lines in 256px and the page read as four
	   mostly-empty boxes. */
	.vyt-contact-card {
		min-height: 0;
	}

	/* Five cards at 165px each is 18 characters a line - "Siunčiame į visus /
	   Lietuvos miestus ir / miestelius per / patikimus kurjerių / partnerius."
	   auto-fit rather than a count, so this needs no further breakpoint: one
	   column on a phone, three at 768, and the fifth card is never stranded
	   alone in a half-empty row. */
	.vyt-delivery-cards {
		grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
		gap: 16px;
	}

	.vyt-delivery-card {
		min-height: 0;
	}

	/* Five categories in two columns leave the fifth alone in the left half.
	   It takes the row instead, which reads as the last item rather than as a
	   layout that ran out. */
	.vyt-cats__grid > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.vyt-cats__grid > :last-child:nth-child(odd) .vyt-cat__media {
		aspect-ratio: 16 / 6;
	}

	/* --- ONE RHYTHM BETWEEN SECTIONS ------------------------------------ */

	/*
	 * 48px BETWEEN EVERY TWO SECTIONS, ON EVERY PAGE. Measured at 390 before
	 * this rule, the joins were: 88, 80, 80, 72, 48 on Pagrindinis; 66, 40, 104,
	 * 40 on Parduotuvė; 40, 48, 48, 48, 32, 64 on Apie mus; 48, 48, 48, 48, 32
	 * on Pristatymas; 89, 80, 56, 72, 48 on Kontaktai. Twenty-four joins, eleven
	 * different values, for one join. Matas: "make sure there are no stupid
	 * random gaps ... no random gap distances."
	 *
	 * These sections are pure rhythm - not one of them paints a background of
	 * its own, and Kontaktai's five all sit on ONE continuous band - so the
	 * visual gap between two sections is exactly the sum of their two paddings
	 * and nothing else. 24 and 24 gives 48, which is the value the two most
	 * consistent pages already used.
	 *
	 * The heroes keep 48 on top (the page-start rule below) and take the same 24
	 * underneath, so the first join matches every other one.
	 *
	 * A LIST, NOT A STRUCTURAL SELECTOR. `main > * > *` would also catch the
	 * WooCommerce blocks on the cart and the checkout, which lay themselves out
	 * and are handled in their own section at the end of this file.
	 */
	.vyt-section,
	.vyt-story,
	.vyt-order,
	.vyt-gift,
	.vyt-cta,
	.vyt-catbar,
	.vyt-shop,
	.vyt-giftband,
	.vyt-trust,
	.vyt-about-who,
	.vyt-about-story,
	.vyt-about-process,
	.vyt-about-panels,
	.vyt-about-eco,
	.vyt-cta-dark,
	.vyt-shipping,
	.vyt-promise,
	.vyt-pay,
	.vyt-faq,
	.vyt-contact-cards,
	.vyt-contact-body,
	.vyt-follow,
	.vyt-wholesale,
	.vyt-product {
		padding-block: 24px;
	}

	/* --- Every page starts the same distance below the header ----------- */

	/*
	 * MEASURED, NOT ASSUMED: at 390 the gap between the bottom of the header and
	 * the page's first heading was 64 on Pagrindinis, 44 on Parduotuvė, 48 on
	 * Apie mus and Pristatymas, and 116 on Kontaktai. Five pages, four numbers,
	 * for the same join - and 116 of them empty above "Susisiekite su mumis",
	 * because `.vyt-page-hero` carries node 39:1033's 118px drop from a 1440px
	 * frame straight down to a phone.
	 *
	 * 48 is the value three of the five already used, so this moves two pages
	 * rather than five and does not invent a number.
	 */
	.vyt-hero,
	.vyt-shop-hero,
	.vyt-page-hero,
	.vyt-delivery-hero {
		padding-block: 48px 24px;
	}

	/* --- The hero photographs ------------------------------------------- */

	/* 759x240 is 3.16:1. At 350px wide that is a 111px letterbox strip, and the
	   fish in it cannot be made out. 16:9 is the same photograph at a size a
	   phone can show - 197px at 390 - and it still reads as the banner the
	   desktop frame draws rather than as a square. 3:2 was tried first and is
	   better on a phone but too tall on a 768 tablet, where it took 485px of the
	   screen before the page had said anything. */
	.vyt-page-hero__media,
	.vyt-shop-hero__media,
	.vyt-delivery-hero__media {
		aspect-ratio: 16 / 9;
	}

	/* --- The timeline --------------------------------------------------- */

	/* The rail behind the dots is dropped once the row breaks up (see the 1024
	   block), which left a 14px filled circle floating on its own line above
	   each year with nothing connecting them. On one column the dot belongs
	   BESIDE the year it marks. */
	.vyt-timeline__point {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 12px;
	}

	.vyt-timeline__dot {
		flex: none;
	}

	.vyt-timeline__year {
		margin-top: 0;
	}

	.vyt-timeline__text {
		flex: 1 1 100%;
		margin-top: 4px;
	}

	/* --- The product tabs ----------------------------------------------- */

	/* THE STRIP ALREADY SCROLLED AND STILL BROKE. `overflow-x: auto` is set on it
	   at 900 - what was missing is that a flex item may still WRAP ITS OWN TEXT,
	   so the fifth tab did not scroll out of view, it broke in half: the strip
	   read "Mais / ver" clipped at the right edge of a 390px screen. A tab strip
	   that does not fit scrolls; it never wraps.
	   The gutter goes too: at 24px of inset, on a 350px screen, the first tab
	   started a quarter of the way in. */
	.vyt-ptabs__strip {
		gap: 20px;
		padding-inline: 0;
		scrollbar-width: none;
	}

	.vyt-ptabs__strip::-webkit-scrollbar {
		display: none;
	}

	.vyt-ptabs__tab {
		flex: none;
		white-space: nowrap;
	}

	.vyt-ptabs__panel {
		padding-inline: 20px;
	}

	/* --- One treatment for icon + title + copy --------------------------- */

	/* THREE COMPONENTS DRAW THE SAME THING AND TWO OF THEM DISAGREED. The story
	   band indents its copy 40px so it starts under the TITLE; the timeline and
	   the process steps start theirs at the block's left edge, under the icon.
	   On a 350px screen the indent also costs 14% of the measure. So on a phone
	   none of them indent, which is both the consistent answer and the one that
	   leaves the most room for the words. */
	.vyt-story__feature p {
		margin-left: 0;
	}

	/* --- Cards sized for a wider column --------------------------------- */

	/* 324px is the height of a 308px-wide card in a four-across row. Two across
	   on a phone the card is 165px wide, and the floor left about 110px of empty
	   space between the weight line and the price on every product on the site.
	   The price is `margin-top: auto`, and grid rows stretch, so the prices stay
	   level across a row without a floor to hold them there. */
	.vyt-card {
		min-height: 0;
	}

	/* With the floor gone the `auto` margin above the price collapses to nothing
	   on the shortest card, so the price sat directly under the weight line. A
	   floor on the SPACE rather than on the card. */
	.vyt-card__price {
		padding-top: 12px;
	}

	/* --- The quantity stepper ------------------------------------------- */

	/*
	 * 110x38 with two 14x14 buttons is node 1:224, and it is a mouse control.
	 * The pill grows to 44 tall and to 132 wide so that each step can carry a
	 * 40x44 hit area WITHOUT overlapping the number field between them - two
	 * targets that overlap a text input steal taps meant for the input, which is
	 * worse than the small buttons were. The glyphs stay 9px, as drawn.
	 */
	/* "the - and + should be pushed off the edges a bit more cause right now
	   theyre really close to the edges." 148 - 24px of inset is 124, which is
	   exactly the 40 + 44 + 40 the three controls need, so the glyphs move in
	   without their hit areas overlapping the number between them. */
	.vyt-product__form .quantity {
		width: 148px;
		height: 40px;
		padding-inline: 12px;
	}

	.vyt-product__form .vyt-qty__step {
		position: relative;
	}

	.vyt-product__form .vyt-qty__step::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 40px;
		height: 44px;
		transform: translate( -50%, -50% );
	}

	/* 40 + 44 + 40 is exactly the pill's 124px interior, so the number field
	   fills the space between the two step targets without overlapping either. */
	.vyt-product__form .quantity input.qty {
		width: 44px;
		height: 44px;
	}

	/* --- The delivery strip --------------------------------------------- */

	/* Wrapped onto three rows the 20px column gap became a 20px ROW gap on top
	   of the heading's own leading, so the truck icon sat alone with 58px of
	   nothing under it. */
	.vyt-delivery {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	/* --- The closing call to action ------------------------------------- */

	/* CENTRED, and this is the one place on the phone where centring is the
	   answer rather than a preference. The panel holds a heading and a single
	   button; wrapped, the button ended up stranded at the left of a full-width
	   card with 130px of empty space beside it. There is already a decision in
	   this file that says exactly that about the wholesale card - "a 218px
	   button stranded on the left of a full-width card reads as a mistake" - so
	   this follows it rather than inventing a second rule for the same shape.
	   Body copy and lists are NOT centred; only these two panels are. */
	.vyt-cta__panel,
	.vyt-cta-dark__panel {
		justify-content: center;
		text-align: center;
	}

	/* --- Apmokėjimo būdai: one card per row ------------------------------ */

	/*
	 * "the SEB SwedBank Luminor text is too wide, all the cards have the same
	 * like padding gaps around it but that line goes wider than it. Wrapping
	 * might make it look bad, needs some thinking on how it should look."
	 *
	 * The row of bank names is a fixed string that cannot get narrower, so the
	 * question is really how wide the card is. Two across at 390 gives each one
	 * 163px, which is 20 characters a line - "Atsiskaitykite saugiai naudodami
	 * Visa, Mastercard ar kitas korteles." came out over four lines - and leaves
	 * the bank row wider than the padding around everything else in the card.
	 *
	 * One per row is the same answer the delivery cards got, for the same reason:
	 * the copy gets a readable measure and the bank names fit on one line inside
	 * the card's own padding, with nothing shrunk and nothing wrapped.
	 */
	.vyt-pay__list {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* --- The bulk-order panel ------------------------------------------- */

	/* Same shape as the gift band and the wholesale card, so it gets the same
	   answer: one column, content on the middle of it, and a button that fills
	   rather than one stranded on the left of a full-width card. */
	.vyt-bulk__panel,
	.vyt-bulk {
		text-align: center;
	}

	.vyt-bulk__pill {
		display: inline-flex;
	}

	.vyt-bulk__button {
		display: flex;
		width: 100%;
		justify-content: center;
	}

	.vyt-bulk__text {
		max-width: none;
	}

	/* --- The nav panel's head sits on the header's line ------------------ */

	/* The list carries a browser default `margin-block` and the head row its own
	   margin, which between them left 62px between the logo and the first link.
	   The logo is also smaller here than on the bar - it is a marker inside the
	   panel, not the page's masthead. */
	.vyt-nav__brand img {
		width: 44px;
	}

	.vyt-nav__list {
		margin-block: 0;
	}

	/* --- The filter panels ---------------------------------------------- */

	/*
	 * "I think the filter cards that expand look way too tall, looks pretty dumb
	 * unnecessarily."
	 *
	 * They are: 20px of panel padding, a 16px heading margin over a 12px rule,
	 * and then rows on a 44px tap target. Three checkboxes came to 236px of card
	 * for three words. The 44px rows STAY - they are the reason the filters are
	 * usable with a thumb at all - so the height comes off everything around
	 * them: the panel's own padding, and the air under the heading.
	 */
	.vyt-shop__rail .wc-block-product-filters__content > * {
		padding: 12px 16px;
	}

	.vyt-shop__rail .wc-block-product-filters__content {
		gap: 12px;
	}

	.vyt-filter__title {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}

	/* --- Mūsų istorija reads as a timeline ------------------------------- */

	/*
	 * "desktop has like the line and it actually looks like a timeline and here
	 * its just some random list with nothing."
	 *
	 * At 1440 the four points sit on a row with a rule running behind them; the
	 * 1024 block drops that rule because a horizontal line makes no sense once
	 * they stack, and nothing replaced it - so the phone got four years and four
	 * sentences with no thread. The same idea turned ninety degrees: a rail down
	 * the left, a dot per year sitting on it, the copy indented past it.
	 */
	.vyt-timeline {
		position: relative;
		padding-left: 28px;
	}

	.vyt-timeline::before {
		display: block;
		top: 6px;
		right: auto;
		bottom: 6px;
		left: 6px;
		width: 1px;
		height: auto;
	}

	.vyt-timeline__point {
		display: block;
		position: relative;
	}

	.vyt-timeline__dot {
		position: absolute;
		top: 4px;
		left: -28px;
	}

	.vyt-timeline__year {
		margin-top: 0;
	}

	.vyt-timeline__text {
		margin-top: 4px;
	}

	/* --- The contact form is one field per row --------------------------- */

	/* "The form also looks bad and everything is like narrow and squeezed up."
	   Name and e-mail share a row from the design's 630px card; at 390 that is
	   165px each, and with fields at the 16px iOS needs both placeholders were
	   clipped mid-word - "Įveskite varc", "Įveskite el. p". Nothing on a phone
	   needs two fields on one line. */
	.vyt-form__row {
		grid-template-columns: minmax( 0, 1fr );
		display: grid;
		gap: 16px;
	}

	/* --- Kontaktai: the cards are centred ------------------------------- */

	/*
	 * Matas: "This whole page looks incredibly bad, everything is super
	 * left-focused-anchored. like the left 35% of the page is filled and the 65%
	 * page to the right is almost all empty."
	 *
	 * Each card holds four short strings - an icon, a label, a value and a note -
	 * and at 1440 they sit in a 308px column four across, where left alignment is
	 * the only thing that makes sense. Stacked at full width they became four
	 * short lines hugging the left edge of a 350px white box with nothing in the
	 * other half of it.
	 *
	 * This is the case the standing instruction is about: a short, standalone
	 * block with no list and no form in it. Centred, each card reads as one
	 * thing. The icon goes with it - a disc pinned left above centred text would
	 * be the same fault in miniature.
	 */
	.vyt-contact-card {
		text-align: center;
	}

	.vyt-contact-card__icon {
		margin-inline: auto;
	}

	.vyt-contact-card__registry {
		text-align: center;
	}

	/* --- The two hero buttons share the row ----------------------------- */

	/* "the 2 first buttons should be on one line and fill in instead of both
	   sitting on the left." Equal shares of the row, labels centred; `min-width`
	   released so a long label wraps inside its own button instead of forcing
	   the pair onto two lines. */
	.vyt-hero__actions > * {
		flex: 1 1 0;
		min-width: 0;
	}

	.vyt-hero__actions .wp-block-button__link,
	.vyt-hero__actions .vyt-btn,
	.vyt-hero__actions > a {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	/* --- One counter, everywhere ---------------------------------------- */

	/*
	 * "Lets just keep all the counters throughout the site looking the same and
	 * not different on every page." The product page draws node 1:224's pill;
	 * the cart draws WooCommerce's, which after the tap-target pass was a 44px
	 * outlined box with far more air in it. Same shape now: same height, same
	 * radius, same border, and the steps carry their 44px target through an
	 * overlay rather than by being 44px wide boxes.
	 */
	/* 40 TALL, NOT 44, AND THE WIDTH CANNOT MOVE. An independent review of the
	   cart called this pill the loudest thing in the row - measured at 2.9x the
	   height of the 16px product name - and asked for 104x32.

	   104 IS NOT AVAILABLE. The width is what carries the tap targets from
	   Matas's own pass: the two steps need 44px each and the number between them
	   needs its own, and 40 + 44 + 40 is 124 inside a 148px pill. At 104 the two
	   step overlays would cover the input, which is the specific failure that
	   pass recorded - "two targets that overlap a text input steal taps meant for
	   the input, which is worse than the small buttons were."

	   So the height is the only lever, and 40 is the bottom of it: the overlay
	   stays 44 and bleeds 2px above and below, which the 12px margin over this
	   row and the 16px under it absorb. Both counters move together, because
	   "keep all the counters throughout the site looking the same" is a rule and
	   not a preference. */
	.wc-block-components-quantity-selector {
		/* border-box, or the 1px outline is added to the 40 and the cart's pill
		   comes out 42 against the product page's 40 - the two-pixel version of
		   the very inconsistency this rule exists to remove. Measured, not
		   assumed: it rendered 148x42 before this line. */
		box-sizing: border-box;
		width: 148px;
		min-height: 40px;
		border-radius: 20px;
		overflow: hidden;
	}

	.wc-block-components-quantity-selector__button {
		min-width: 40px;
		width: 40px;
	}

	/* The thumbnail's CELL runs the height of the row it belongs to, so the
	   product name and the counter keep their own column instead of being
	   covered by a photograph that stops a third of the way down.

	   THE IMAGE INSIDE IT DOES NOT. That was the same rule until 2026-09-01,
	   and stretching the picture to the row is what made it 56x93 - Matas:
	   "Cart page added product images are some like weird tall rectangles. They
	   should all be squares ... and they should match on the checkout page as
	   well." The checkout's summary already draws 64px squares, so that is the
	   number, and the same product is now the same shape in both places
	   whatever its source file happens to be. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		grid-row: 1 / -1;
		align-self: start;
		width: 64px;
	}

	.wc-block-cart-item__image img,
	table.wc-block-cart-items .wc-block-cart-item__image img {
		width: 64px;
		height: 64px;
		min-height: 0;
		max-width: 64px;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	/* --- A FIXED HEIGHT THAT THE CONTENT CANNOT CENTRE IN --------------- */

	/*
	 * The same fault twice, reported separately.
	 *
	 * THE SORT PILL. `.vyt-shop__sort` is `height: 34px` from node 1:589, and the
	 * tap-target pass gave the BUTTON inside it `min-height: 44px`. A 44px button
	 * in a 34px pill overflows downward, so "Rūšiuoti pagal" sat below the pill's
	 * centre line. The pill grows instead of the button overflowing it.
	 *
	 * THE ORDER NOTE, which Matas has now reported four times: the textarea is
	 * `padding-block: 8px` with `min-height: 44px`, and one 20px line inside that
	 * is 36px of content in a 44px box - the leftover 8px all falls BELOW the
	 * text, because a min-height grows the box downward and does not re-centre
	 * what is in it. 12 + 20 + 12 is exactly 44, so the line sits on the middle.
	 * `field-sizing: content` still grows it for a longer note.
	 */
	.vyt-shop__sort {
		height: auto;
		min-height: 44px;
	}

	/* --- The gift band -------------------------------------------------- */

	/*
	 * Matas: "the button is not centred (should probably just fill in) and
	 * actually the whole text there is not centred but pushed to the left ...
	 * these side gaps could probably be smaller."
	 *
	 * All three come from the desktop card: 48px of side padding, a body capped
	 * at 443px, and a button with a 225px floor - which at 1440 sits in the left
	 * half of a 944px card with the photograph in the right half, and at 390 is
	 * simply a narrow column of left-aligned text in a card with nothing beside
	 * it. Stacked, the card has one column, so its content belongs on the middle
	 * of it.
	 */
	.vyt-giftband__card {
		padding: 24px 20px;
		text-align: center;
	}

	.vyt-giftband__body {
		max-width: none;
	}

	.vyt-giftband__button {
		display: flex;
		width: 100%;
		min-width: 0;
	}

	/* 451px of photograph hanging off a 350px card is most of the screen.

	   `img.` IS LOAD-BEARING. WooCommerce ships `.woocommerce img { height: auto }`
	   - one class and an element, (0,1,1) - and the shop page carries the
	   `woocommerce` body class, so a single-class rule here lost and the photo
	   kept its own 451x451 aspect ratio at 310px square. Naming the element
	   matches that reach. Same trap as the README's first gotcha; it does not
	   stop being true because it is a picture this time. */
	img.vyt-giftband__photo {
		position: static;
		width: 100%;
		height: 200px;
		margin-top: 20px;
		border-radius: 12px;
	}

	/* --- Chips fill the row they are on --------------------------------- */

	/*
	 * "The categories should all fill in and not pushed to the left ... Do not
	 * hard-code, just fill it in."
	 *
	 * `flex-grow` on a wrapping row does exactly that and needs no widths and no
	 * column count: each line shares out whatever is left over on that line, so
	 * three chips on one row and one on the next both reach both edges, at every
	 * width, in any language.
	 */
	.vyt-catbar__pill {
		flex: 1 1 auto;
		justify-content: center;
	}

	/* --- ICON + TITLE + BODY, THE SAME WAY IN EVERY BLOCK --------------- */

	/*
	 * Five components draw the same thing - a small icon, a short title and a
	 * line or two of copy - and every one of them drew it differently. Matas on
	 * the home page's version: "the 4 list items with icons and text look really
	 * bad ... I dont think the Icons are centred to the text (or vice-versa) and
	 * the gaps just look hilariously huge."
	 *
	 * He is describing two separate faults that happen to land together:
	 *
	 *   THE COPY DID NOT LINE UP WITH ITS OWN TITLE. The icon and the title sat
	 *   in a row, and the paragraph started under the ICON instead of under the
	 *   title, so each item read as three things rather than one. A two-column
	 *   grid - icon in the first, title and copy stacked in the second - lines
	 *   the text up with itself and puts the icon beside the pair.
	 *
	 *   THE GAPS WERE THE DESIGN'S, AT A THIRD OF THE WIDTH. 52px between items
	 *   is right in a 224px column on a 1440 frame and enormous in a 286px card
	 *   on a phone.
	 */
	.vyt-story__feature {
		display: grid;
		grid-template-columns: 32px minmax( 0, 1fr );
		column-gap: 12px;
		row-gap: 4px;
		align-items: center;
		min-height: 0;
	}

	/* `display: contents` dissolves the head so its icon and its title become
	   grid items of the feature itself - column one and column two of row one -
	   without touching the markup. */
	.vyt-story__feature-head {
		display: contents;
	}

	.vyt-story__feature .vyt-icon {
		width: 32px;
		height: 32px;
	}

	.vyt-story__feature p {
		grid-column: 2;
	}

	.vyt-story__features {
		gap: 24px;
		padding-top: 0;
	}

	.vyt-story__more-wrap {
		margin-top: 32px;
	}

	/* Kas mes esame. A 52px gap and a 16px left inset, both from a row that is
	   three across at 1440 and one across here. */
	.vyt-about-traits {
		flex-direction: column;
		gap: 16px;
		padding: 24px 0 0;
	}

	.vyt-about-traits li,
	.vyt-about-values li,
	.vyt-trust__item {
		align-items: center;
		width: 100%;
	}

	/* Kokybė ir natūralumas. `repeat(2, 100px)` is 208px of grid in a 286px card,
	   so the four promises sat in the left three-quarters of the panel with the
	   photograph showing through beside them - the "all pushed to the left" of
	   Matas's note. The badge and its label also belong on one line: stacked,
	   with the badge left-aligned above the words, they read as eight things. */
	.vyt-about-promises {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 12px;
	}

	.vyt-about-promises li {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		line-height: 18px;
	}

	.vyt-about-promises__badge {
		flex: none;
	}

	.vyt-about-quality {
		padding: 20px;
	}

	/* --- THE SERIF IS FOR HEADINGS, NOT FOR LABELS ---------------------- */

	/*
	 * Matas: "idk how I feel about the random different nice font instead of
	 * using the same one throughout the site ... change it to the same one so it
	 * doesn't stand out as much", and later "keep the font issue just for
	 * mobile".
	 *
	 * The rule that came out of measuring every Lora element on the site: at
	 * 20px and up it is a SECTION OR PAGE HEADING and it is the brand's voice -
	 * "Populiariausi produktai", "Kaip gaminame?", "Parduotuvė". Below that it is
	 * a LABEL inside a component - a list item's title, a card's caption, a
	 * footer column head - and a serif on a 12px label beside 13px Inter body
	 * copy reads as a font that got in by accident.
	 *
	 * PRODUCT NAMES KEEP THE SERIF at every size. They are the one small string
	 * that is genuinely the brand speaking, they appear at 16 and at 20 in the
	 * two card sizes, and switching only one of those would split the shop's
	 * typography down the middle.
	 *
	 * Desktop is untouched: there the labels sit in narrow columns where the
	 * serif reads as detail rather than as noise.
	 */
	.vyt-story__feature h3,
	.vyt-footer__heading,
	.vyt-trust__title,
	.vyt-timeline__year,
	.vyt-delivery-card__title,
	.vyt-pay__name,
	.vyt-process__title,
	.vyt-about-values li strong,
	.vyt-about-promises li span,
	.vyt-filter__toggle-text,
	.vyt-delivery h3,
	.vyt-delivery__time strong,
	.vyt-contact-card h2,
	.vyt-promise__list strong,
	.vyt-step h3 {
		font-family: var(--wp--preset--font-family--body);
		font-weight: 600;
		letter-spacing: 0;
	}

	/* --- 16px IN EVERY FIELD, AND THIS ONE IS NOT A TASTE QUESTION ------- */

	/*
	 * iOS Safari ZOOMS THE PAGE when a form field whose font-size is under 16px
	 * is focused. It is not configurable and it is not affected by the viewport
	 * meta tag on modern iOS - the only thing that stops it is 16px.
	 *
	 * Measured on the running site: all fifteen fields were under it. Every one
	 * of the checkout's eight, both contact fields, the message box and the
	 * newsletter. So on an iPhone, tapping any field on this site punches the
	 * layout up a notch and leaves the shopper scrolled sideways in the middle of
	 * paying - on the one flow that has to work.
	 *
	 * This is separate from the question of whether the site's COPY is too small,
	 * which is a judgement and is still open. A field is not copy: 16px here is a
	 * hard constraint from the platform, not a preference.
	 *
	 * The labels stay at 12px - the zoom is triggered by the focused field only.
	 */
	.wc-block-components-form .wc-block-components-text-input input[type="text"],
	.wc-block-components-form .wc-block-components-text-input input[type="email"],
	.wc-block-components-form .wc-block-components-text-input input[type="tel"],
	.wc-block-components-form .wc-block-components-text-input input[type="number"],
	.wc-block-components-form .wc-block-components-textarea,
	.wp-block-woocommerce-checkout .wc-block-components-address-form input,
	.wp-block-woocommerce-checkout .wc-block-checkout__order-notes .wc-block-components-textarea,
	.wp-block-woocommerce-checkout .wc-blocks-components-select__select,
	.wc-block-components-text-input input,
	.wc-block-components-textarea,
	.wc-blocks-components-select__select,
	.vyt-field input,
	.vyt-field select,
	.vyt-field textarea,
	.vyt-newsletter__input,
	.wp-block-woocommerce-product-filter-price input[type="text"] {
		font-size: 16px;
	}

	/* --- A floor under the body copy ------------------------------------ */

	/*
	 * 13px MINIMUM FOR ANYTHING THAT IS A SENTENCE. The design's small copy is
	 * 11 and 12px, and at 1440 in a 200-250px column that reads fine. On a phone
	 * the same 11px runs the full 350px width, and twenty separate blocks of
	 * body copy on this site were at 11 or 12: the whole timeline, all four
	 * sustainability items, the four values, the process steps, the delivery
	 * cards, the FAQ answers, the product's weight notice.
	 *
	 * This is a floor, not a rescale - nothing above 12px moves, and the 11px
	 * chrome that is NOT a sentence (the card badge, the cart count) stays where
	 * the design put it. The two lines that are chrome but still have to be read
	 * - the copyright and the breadcrumb - go to 12 rather than 13.
	 *
	 * Every one of these declares its own line-height in px, and none of them is
	 * tighter than 17, so a 1-2px rise in the face does not touch the leading.
	 */
	.vyt-story__feature p,
	.vyt-step p,
	.vyt-delivery__main p,
	.vyt-about-traits li,
	.vyt-about-values li span span,
	.vyt-about-eco__intro p,
	.vyt-about-eco__list li,
	.vyt-product__notice p,
	.vyt-bulk__text,
	.vyt-contact-card__note,
	.vyt-contact-card__registry li,
	.vyt-form__privacy,
	.vyt-pay__secure,
	.vyt-delivery-card__text,
	.vyt-faq__answer,
	.vyt-footer__tagline,
	.vyt-footer__newsletter-text,
	.vyt-pay__text,
	.vyt-process__text,
	.vyt-promise__text,
	.vyt-timeline__text,
	.vyt-trust__copy,
	.vyt-wholesale__mail {
		font-size: 13px;
	}

	.vyt-footer__legal,
	.woocommerce-breadcrumb {
		font-size: 12px;
	}

	/* --- TAP TARGETS ---------------------------------------------------- */

	/*
	 * 44px FOR ANYTHING THAT IS A CONTROL. Driven with touch emulation at 390,
	 * the site was full of targets built for a mouse: the quantity stepper's
	 * plus and minus were 14x14, the cart's bin 24x24, the filter headings 24px
	 * tall, every filter checkbox row 21px, the sort menu's button 32 and its
	 * options 38, the product tabs 32, the newsletter's send button 30x28 and
	 * the social icons 32. None of that is reachable with a thumb.
	 *
	 * TWO TREATMENTS, and which one applies is not a style choice:
	 *   - a control whose BOX is the thing you see (a button, a field, a list
	 *     row, a tab) simply gets bigger;
	 *   - a control whose PAINT is a fixed shape - a 32px social disc, a 36px
	 *     bag on a product card, an icon-only bin - keeps its paint and gets an
	 *     invisible `::after` overlay for the hit area. Growing those would be
	 *     redrawing the design to fix a touch problem.
	 *
	 * The overlay pattern is only used where `::after` is free. `.vyt-story__more`
	 * draws its arrow with one and `.vyt-ptabs__tab` draws its underline with
	 * one, so both take padding instead.
	 *
	 * FOUR LINKS ARE DELIBERATELY LEFT SMALL, and each one was checked rather
	 * than waved through: the product card's title (20px) and the cart line's
	 * product name (18px) both point at the same URL as a much larger target
	 * beside them - a 137x114 card photograph and a 56px cart thumbnail. Growing
	 * a title into a 44px block to duplicate a route that already has one would
	 * change the card's typography to solve a problem it does not have.
	 */

	/* Header */
	.vyt-cart-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Section header links and the two standalone text links */
	.vyt-section__link,
	.vyt-story__more,
	.vyt-checkout-back,
	.vyt-contact-card__value a,
	.vyt-footer__made {
		min-height: 44px;
	}

	.vyt-section__link,
	.vyt-checkout-back,
	.vyt-contact-card__value a,
	.vyt-contact-card__value--email a,
	.vyt-wholesale__mail a {
		display: inline-flex;
		align-items: center;
	}

	.vyt-contact-card__value a,
	.vyt-contact-card__value--email a,
	.vyt-wholesale__mail a {
		min-height: 44px;
	}

	.vyt-story__more {
		padding-block: 12px;
	}

	/* Buttons that were a few pixels short */
	.vyt-pill,
	.vyt-bulk__button,
	.vyt-wholesale__button,
	.vyt-giftband__button,
	.vyt-menu__button,
	.vyt-menu__option,
	.vyt-catbar__pill,
	.vyt-filter__clear {
		min-height: 44px;
	}

	/* The breadcrumb is navigation, and on a phone it is the only way back up a
	   level without the menu. 15px rows are not that. */
	.woocommerce-breadcrumb a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.vyt-menu__option {
		display: flex;
		align-items: center;
	}

	.vyt-product__form .single_add_to_cart_button {
		min-height: 48px;
	}

	/* The product tabs. A floor on the BOX rather than extra padding, so the
	   active tab's underline - an `::after` pinned to the tab's bottom edge -
	   stays on the strip's own hairline where it belongs. */
	.vyt-ptabs__tab {
		min-height: 44px;
	}

	/* The shop rail. The heading row IS the toggle, and it was 24px tall; the
	   checkbox rows were 21. Both are full-width, so this costs height and
	   nothing else. */
	.vyt-filter__toggle {
		min-height: 44px;
	}

	.vyt-shop__rail .wc-block-product-filter-checkbox-list__label {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/* The price boxes are the only way to set a price on a phone that does not
	   involve dragging a 16px slider thumb, so they are the control that has to
	   work. */
	.vyt-shop__rail .wp-block-woocommerce-product-filter-price input[type="text"] {
		min-height: 44px;
	}

	/* Icon-only controls: the paint stays, the hit area grows. */
	/*
	 * ONLY THE ONE THAT IS NOT POSITIONED ALREADY.
	 *
	 * `position: relative` here is just to give the `::after` a containing block,
	 * and three of these four controls already have one: the newsletter's send
	 * button, the product card's bag and the gallery's zoom are all
	 * `position: absolute`, and an absolutely positioned element is already a
	 * containing block for an absolutely positioned child. Adding `relative`
	 * OVERRODE their `absolute` and dropped each of them into the flow - the
	 * send button fell out of the field and sat under it as a loose orange disc,
	 * and the bag moved from the bottom-right of every product card to the
	 * bottom-left, on top of the price.
	 *
	 * BOTH PASSED THE TAP-TARGET PROBE while broken, because the boxes were the
	 * right SIZE and still on the page. Only a screenshot showed it. A size
	 * check is not a layout check.
	 */
	.vyt-social__link {
		position: relative;
	}

	.vyt-card__add::after,
	.vyt-social__link::after,
	.vyt-product__gallery-zoom::after,
	.vyt-newsletter__submit::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate( -50%, -50% );
	}

	/* The footer's link lists. Each row becomes a contiguous 44px target and the
	   8px gap between them becomes padding inside the rows, so there is no dead
	   strip between two links to mis-tap into. */
	.vyt-footer__list,
	.vyt-footer__contact {
		gap: 0;
	}

	.vyt-footer__list a,
	.vyt-footer__list .vyt-footer__pending,
	.vyt-footer__contact li,
	.vyt-footer__contact a,
	.vyt-footer__contact span {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/* --- The footer ----------------------------------------------------- */

	/* The only right-aligned thing in a left-aligned stack. The desktop rule is
	   correct and deliberate - nodes 1:1234/1:1240 sit flush with the content
	   edge of a five-column band - but that band does not exist here. */
	.vyt-social {
		justify-content: flex-start;
	}
}

/* ======================================================================
   KREPŠELIS IR ATSISKAITYMAS, STACKED
   ======================================================================

   WooCommerce's block cart and checkout lay themselves out with CSS `@container`
   queries at 700px, and the container is the block, not the viewport - so its
   real breakpoint measured 735 here and no `@media` query in this file could
   line up with it. Everything below forces the plugin's layout to stack at the
   theme's own 782 instead, so the site has ONE phone breakpoint.

   THE PLUGIN ZEROES THE SUMMARY CARD'S PADDING. `cart.css` carries
   `.wc-block-components-sidebar-layout .wc-block-components-sidebar { padding: 0 }`
   under `@media (max-width: 699px)` - two classes, so it beat the one-class rule
   that gives the card its 28px. The card kept its border, its radius, its
   background and its shadow and lost every pixel of inset, so "Iš viso" and
   "4,90 €" sat hard against its own border on every phone. This is the same trap
   the README's first gotcha describes, for the eleventh time. */

@media ( max-width: 782px ) {
	.wc-block-components-sidebar-layout {
		flex-direction: column;
		gap: 24px;
	}

	.wc-block-components-sidebar-layout .wc-block-components-main,
	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		width: 100%;
		padding: 0;
	}

	/* Two classes, to match the plugin's own reach. 20px rather than the
	   desktop 28: the card is already inset from the screen by a 20px gutter,
	   so its content lands on a 40px inner edge either way. */
	.wc-block-components-sidebar-layout .wc-block-cart__sidebar {
		padding: 20px;
	}

	/* TWO IDENTICAL PRICES IN ONE ROW. The cart line shows the unit price under
	   the product name and the line total on the right, and on a phone both were
	   13px in the same colour with no column headings to tell them apart - so at
	   quantity 1 the row simply printed "4,90 €" twice. On desktop the table's
	   headers do that work; here the hierarchy has to be in the type. The total
	   is the number being charged, so it keeps the weight; the unit price steps
	   back to the same treatment as the weight line beside it. */
	.wc-block-cart-item__prices,
	.wc-block-cart-item__prices .wc-block-components-product-price {
		color: var(--wp--preset--color--text-soft);
		font-size: 12px;
	}

	.wc-block-cart-item__total .wc-block-components-product-price {
		color: var(--wp--preset--color--ink);
		font-weight: 700;
	}

	/* 13px for a product name, in a row whose only other job is to say which
	   product it is. */
	.wc-block-cart-item__product .wc-block-components-product-name {
		font-size: 15px;
	}

	/* THE CARD KEEPS ITS NAME. WooCommerce hides the cart's summary heading below
	   its own breakpoint, which left the card opening on a hairline with nothing
	   above it - the first totals row draws a `border-top` and the heading was
	   the thing that border was meant to separate it from. The checkout's summary
	   card carries its heading on a phone, so this one does too. */
	.wc-block-cart .wc-block-cart__sidebar .wc-block-cart__totals-title {
		display: block;
	}

	/* THE CHECKOUT'S SIDEBAR IS NOT A CARD ON A PHONE. Below its own
	   breakpoint WooCommerce renders the order summary TWICE: a collapsible
	   header in the sidebar, and the whole summary again inside the actions
	   block above the place-order button. Both were showing, so the page said
	   "Užsakymo santrauka" twice, once as a toggle at the top and once in full
	   at the bottom.
	   The one that stays is the one above the button, because that is where a
	   shopper needs to see what they are paying for. What is left in the sidebar
	   is the assurances card and the way back, which belong AFTER the button
	   rather than before the form - so the sidebar is ordered second and loses
	   the card chrome it no longer has any content to wrap. */
	.wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block {
		display: none;
	}

	.wc-block-components-sidebar-layout .wc-block-checkout__sidebar {
		order: 2;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.wc-block-checkout__sidebar .vyt-checkout-back {
		margin-top: 24px;
	}

	/* The assurances card carries a 24px top margin for the desktop sidebar,
	   where it sits under the summary. Reordered below the button it lands on
	   top of the layout's own 24px gap and whatever the actions block puts under
	   the button, which came to 84px between the button and the card while every
	   other join in the stack is 24 or 32. */
	.wc-block-checkout__sidebar .vyt-assure {
		margin-top: 0;
	}

	/* The summary that stays gets the card the sidebar gave up. */
	.wc-block-checkout__actions .checkout-order-summary-block-fill {
		padding: 4px 16px;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--custom--radius--panel);
		background: #fcfdfd;
	}

	.wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper {
		padding-bottom: 24px;
		border: 0;
	}

	/* --- TAP TARGETS on the plugin's own controls ----------------------- */

	/*
	 * Measured with touch emulation at 390: the quantity stepper's buttons were
	 * 30x25, the bin 24x24, the coupon row 20px tall, the "+ Pridėti" address
	 * toggle 18px, and every field 41px. These are the controls a shopper has to
	 * hit while holding the phone in one hand and paying.
	 */
	.wc-block-components-quantity-selector {
		min-height: 40px;
	}

	/* 38, SO THE PILL IS 40. `box-sizing: border-box` on the pill does not help
	   when its CHILDREN are 40 and it has a 1px outline - the content forces it
	   to 42 and the cart's counter came out two pixels taller than the product
	   page's, which is the two-pixel version of the inconsistency the counter
	   rule exists to remove. The target is unaffected: it is an overlay. */
	.wc-block-components-quantity-selector__button {
		position: relative;
		min-width: 40px;
		min-height: 38px;
	}

	.wc-block-components-quantity-selector__button::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate( -50%, -50% );
	}

	.wc-block-components-quantity-selector__input {
		min-height: 38px;
	}

	/* The bin keeps its 24px glyph and gains the hit area around it. */
	.wc-block-cart-item__remove-link {
		position: relative;
	}

	.wc-block-cart-item__remove-link::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate( -50%, -50% );
	}

	/* The coupon row and the second address line's toggle are both full-width
	   text rows that happen to be buttons. */
	.wc-block-components-panel__button,
	.wc-block-components-address-form__address_2-toggle {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/* 41px is node 1:920's field. On a phone the floor is 44.

	   THE SELECTOR HAS TO MIRROR THE ONE IT IS RAISING. The shared field rule
	   further up this file lists the inputs by TYPE ATTRIBUTE, which makes it
	   (0,3,1); a two-class rule here was (0,2,1) and lost, so the country select
	   went to 44 and the eight text fields beside it stayed at 41 - the sort of
	   half-applied fix that reads as a caching problem. */
	.wc-block-components-form .wc-block-components-text-input input[type="text"],
	.wc-block-components-form .wc-block-components-text-input input[type="email"],
	.wc-block-components-form .wc-block-components-text-input input[type="tel"],
	.wc-block-components-form .wc-block-components-text-input input[type="number"],
	.wc-block-components-form .wc-block-components-textarea,
	.wp-block-woocommerce-checkout .wc-block-components-textarea,
	.wp-block-woocommerce-cart .wc-block-components-textarea,
	.wc-block-components-text-input input[type="text"],
	.wc-block-components-text-input input[type="email"],
	.wc-block-components-text-input input[type="tel"],
	.wc-block-components-text-input input[type="number"],
	.wc-block-components-address-form input,
	.wc-block-components-textarea,
	.wc-block-components-combobox input.components-combobox-control__input,
	.wc-block-components-select .wc-blocks-components-select__select,
	.wp-block-woocommerce-checkout .wc-blocks-components-select__select {
		min-height: 44px;
	}

	/* The second address line and the order note each have a rule of their own
	   further up the file, at a reach the list above does not match. Raised
	   explicitly rather than by widening that list, so it stays readable which
	   rule each field is answering to. */
	.wp-block-woocommerce-checkout .wc-block-components-address-form input,
	.wp-block-woocommerce-checkout .wc-block-checkout__order-notes .wc-block-components-textarea {
		min-height: 44px;
	}

	/* 96px of padding under a summary card, plus the stacked columns' own
	   bottom margins, left about 200px of empty white between the last thing on
	   the page and the top of the footer.
	   The order confirmation is the same box and starts 48px below the header
	   like every other page on the site. */
	.wp-block-woocommerce-cart,
	.wp-block-woocommerce-checkout,
	.vyt-confirm {
		padding-bottom: 48px;
	}

	.vyt-confirm {
		padding-top: 48px;
	}

	.wc-block-cart {
		margin-bottom: 0;
	}
}

/* ======================================================================
   TUŠČIAS KREPŠELIS - the page behind the bag whenever the badge reads 0
   ======================================================================

   IT HAD NEVER BEEN OPENED. Every first visit to the site can reach it in one
   tap, and it was shipping as WooCommerce writes it: a small bold line, a
   DOTTED SEPARATOR, a display-sized second heading, and four products in the
   plugin's own `wc-block-grid` markup, which nothing in this theme styles - so
   they rendered one per row at full width with 320px-tall photographs and the
   page ran to 3455px. Three grey dots on an otherwise empty page read as
   something that failed to load.

   The dots and the missing way back are fixed in tools/local-setup.sh, where
   page content belongs. What is here is the type and the grid.

   THE HIERARCHY WAS INVERTED and that is what made it look broken rather than
   plain: "Jūsų krepšelis tuščias" - the thing the page is about - rendered at
   14px, and "Naujienos parduotuvėje" under it at the theme's display size, two
   lines tall. */

.wc-block-cart__empty-cart__title.wc-block-cart__empty-cart__title {
	margin: 24px 0 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: 700;
	line-height: 32px;
}

.vyt-empty-cart__lead {
	margin: 8px auto 0;
	max-width: 420px;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--base);
	line-height: 22px;
}

.vyt-empty-cart__actions {
	margin-top: 24px;
}

.vyt-empty-cart__news.vyt-empty-cart__news {
	margin: 56px 0 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 28px;
}

/* The plugin's grid block ships no layout of its own here - its `<ul>` computes
   `display: block`, which is how four products became four full-width rows.
   SCOPED TO THE PLUGIN'S OWN CLASS, not to the `vyt-empty-cart` class the page
   content carries: `woocommerce/empty-cart-block` is a DYNAMIC block, so it
   builds its wrapper in PHP and the className saved in the content never
   reaches the browser. The static heading and paragraph blocks beside it do
   keep theirs, which is why half of this section worked and half did not. */
/* THREE CLASSES, BECAUSE THE PLUGIN USES THREE. `all-products.css` carries
   `@media (max-width: 480px) { .wc-block-grid.has-2-columns .wc-block-grid__products
   { display: block } }` - WooCommerce deliberately stacks a two-column grid on a
   phone. Two 167px cards scan better here than one 350px card with a 350px
   photograph, so this overrules it, and it has to match the reach to do so. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__products {
	display: grid;
	/* FOUR AND TWO, THE SAME AS THE SHOP GRID, rather than an auto-fill track.
	   auto-fill was tried first and is wrong at both ends here: the block only
	   ever renders four products, so at 1440 it laid out SEVEN tracks and left
	   three empty, and at 360 two 152px cards would not fit a 160px minimum so
	   it dropped to one 320px card with a 320px square photograph. A fixed count
	   at the site's own breakpoint does what a shopper expects on both. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

@media ( max-width: 782px ) {
	.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__products .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* THE CARD IS A GRID CELL NOW, SO IT MUST NOT CARRY THE PLUGIN'S OWN SIZING.
	   `all-products.css` sizes these as flex items of a wrapping row - a width,
	   a max-width and a transparent BORDER used as the gutter. Inside a real
	   grid all three are wrong at once, and at 768 they produced 105px cards
	   with a 66px photograph and a circular button with "kre pše" clipped inside
	   it. The `border-width: 0 8px 16px` is also why every child measured 119px
	   in a card that reported 167px wide and 16px of padding. */
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	border: 0;
	padding: 12px 16px 16px;
	border-radius: 10px;
	background: #f9f9f8;
	text-align: left;
}

/* THE CARD'S CHILDREN TAKE THE CARD'S WIDTH. The plugin centres this column,
   so the photograph, the price and the button each shrank to their own content
   width and floated in the middle of a card they never filled - a 119px image
   inside a 135px box, and an "Į krepšelį" button narrower than the word above
   it. `align-items: stretch` on the card is not enough on its own; the reach
   that wins here is the one that names the children. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products .wc-block-grid__product > * {
	width: 100%;
	align-self: stretch;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
	text-decoration: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
	display: block;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	margin: 12px 0 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 22px;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	margin: auto 0 0;
	padding-top: 12px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 22px;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
	margin-top: 12px;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
	width: 100%;
	/* The theme's buttons are a fixed 52px pill. In a card this narrow the label
	   has to be allowed to wrap, or a two-word button renders as a circle with
	   its own text clipped inside it. */
	height: auto;
	min-height: 44px;
	padding: 12px 16px;
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
}

/* THE CART ROW HAS TO FIT A 320px SCREEN, and only there.

   Below its own breakpoint WooCommerce turns the cart row into a GRID with the
   tracks written out: `grid-template-columns: 80px 132px` and a 16px column
   gap, plus two implicit tracks for the line total. That is 313px of hard
   minimum inside a 280px content column at 320, so the table put 17px past the
   viewport - a horizontal scrollbar on the cart, on the narrowest phones.

   Shrinking the thumbnail alone did nothing, because the 80px is the TRACK and
   not the cell: the picture obediently became 40px inside a track that stayed
   80. The template is what has to change.

   56px and a flexible second track, with the gap doing the spacing the cell's
   own padding used to do. `align-sweep` found this the moment 320 was added to
   its overflow widths; it had never sampled that width. */
@media ( max-width: 480px ) {
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 56px minmax( 0, 1fr );
		column-gap: 12px;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		padding-right: 0;
	}

	table.wc-block-cart-items .wc-block-cart-item__image img,
	.wc-block-cart-item__image img {
		min-width: 0;
	}
}

/* THE CONTACT FORM'S ANSWER LANDS ON THE FORM, NOT UNDER THE HEADER.

   Every branch of vytintas_handle_contact_form() now redirects to
   `#kontaktu-forma`, because the notice it produces sits 1,770px down a 5,074px
   page and the browser was landing at the top of it - on a phone, submitting
   the form looked like it had done nothing. An anchor alone would put the card's
   first pixel level with the viewport's top edge, so the heading would sit under
   nothing but would have no air above it. */
#kontaktu-forma {
	scroll-margin-top: 24px;
}

/* The newsletter's "not wired up yet" line shares the validation box and not
   its tone: nothing is wrong with the address that was typed. */
.vyt-field__error--info {
	color: var(--wp--preset--color--text-soft);
}

/* ======================================================================
   THE GAP PASS - 2026-09-01
   ======================================================================

   Matas, on the phone: "TAKE CARE OF THE GAPS IN THE SITE PLEASE!!! gaps below
   text, gaps to the right/left of the text, above, gaps between elements,
   between elements and the border, EVERY SINGLE GAP." And: "the gap is like
   that because I wanted it to be" rather than "it happened like that."

   ONE CAUSE UNDERNEATH ALL OF IT, and it is worth naming because it will keep
   producing this until every instance is gone: the desktop build transcribes
   distances measured off a 1440px Figma frame as FIXED PIXEL VALUES - a 28px
   gap under a category photo, a 52px button height, a 324px card floor, a -5px
   media bleed, a 24px gap under a card photo. Every one of those is correct at
   1440 and arbitrary at 390, and none of them fails any check this repo has:
   nothing overflows, nothing is unreadable, the numbers are simply wrong for
   the width. Measured, not guessed - each value below is followed by what the
   probe read before it.

   THE SPACING SCALE ON A PHONE. Four steps, and nothing else:
       4px   inside a line pair (title to its own body copy)
      12px   inside a component (its padding, and photo to label)
      24px   between a heading and what it introduces
      48px   between two sections            (already set, unchanged)
   Every value in this block is one of those four. */

@media ( max-width: 782px ) {

	/* --- The header's menu button --------------------------------------

	   "The header menu button is not centred vertically or in the random square
	   that I see."

	   THE RANDOM SQUARE IS THE BROWSER'S OWN BUTTON. `.vyt-nav-toggle` appears
	   in exactly two rules in this file: `display: none` in the base and
	   `display: flex` plus a 44x44 box at 1024. It never got a control reset, so
	   Chrome's default `<button>` chrome was drawing it - the computed style
	   read `padding: 1px 6px` and `font-family: Arial`, which is the UA
	   stylesheet and nothing of ours. Hence a bordered grey box, and hence an
	   icon sitting off-centre inside it: 1px of padding above and below, 6px
	   left and right, in a box forced to 44x44.

	   The reset is in the base rule below this block so the desktop bar cannot
	   disagree with the phone about what the control looks like. */

	/* --- The two hero buttons ------------------------------------------

	   "these buttons look bad, the gap between the lines in the middle is too
	   big and its too close to the top and bottom. Like the vertical gaps."

	   Both halves of that are one fact: `.wp-block-button__link` is
	   `height: 52px` - a fixed height read off node 1:1308 - and at 390 the
	   labels do not fit on one line. "Atrasti produktus" wrapped to two lines
	   (44.8px of text in a 52px box, so 3.6px above and below, which is the
	   "too close to the top and bottom"), and the outline button's "Sužinoti,
	   kaip gaminame" wrapped to THREE and overflowed its own border - the line
	   crossing that label in the screenshot is the pill's edge, not a
	   strikethrough.

	   TWO FIXES, AND THE FIRST ONE IS THE REAL ONE. A button whose height is
	   fixed cannot survive text it did not expect, so the height becomes a
	   floor. Then the pair is allowed to stop sharing the row: `flex-basis`
	   240px is the width the longer of the two labels needs on one line, so
	   below ~540px they stack full-width and above it they sit side by side -
	   the switch is computed from the labels, not written against a viewport. */
	.vyt-hero__actions > * {
		flex: 1 1 240px;
		min-width: 0;
	}

	.vyt-hero__actions .wp-block-button__link,
	.vyt-hero__actions .wp-block-button.is-style-outline .wp-block-button__link {
		/* The outline pill carries its own `height: 54px` at a higher
		   specificity, so stacked one above the other the pair measured 52 and
		   54 - two buttons doing the same job at two heights. Part two of this
		   pass then found four declared button heights across the site (44, 48,
		   49, 52) and settles all of them at 48, which is where these two get
		   their floor; this rule only has to release the fixed height and set
		   the vertical frame. */
		height: auto;
		padding-block: 12px;
	}

	/* --- A section heading and its "see all" link ----------------------

	   "in the home page Populiariausi produktai, Ziureti visus > and then the
	   products themselves - all the gaps look weird and like an afterthought."

	   He is describing a 24px flex gap plus a 44px tap box plus a 32px margin.
	   Measured at 390: the title ended at y=686.8, the link's BOX started at
	   710.8, and the link's text is centred in 44px - so the visible gap under
	   the title was 24 + 12 = 36px, and the gap under the link's text was
	   12 + 32 = 44px. Three numbers, none of them chosen.

	   The tap target stays 44px; it just stops being visible space. The link's
	   own 12px of padding is subtracted from the gap above it and counted
	   towards the 24px below it, so what the eye sees is 8px from title to link
	   and 24px from link to the grid. */
	.vyt-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		margin-bottom: 12px;
	}

	.vyt-section__link {
		margin-top: -4px;
	}

	/* --- ONE product card ----------------------------------------------

	   "The products on the home page and the shop cards dont look the same. The
	   home page name text is way too big. They should look the same and look
	   nice."

	   Measured side by side at 390. Home: 169x261, padding 12/16/16, photo
	   `margin: 0 -5px 24px` (it bleeds 5px past its own padding on each side),
	   title Lora 20/24 over two lines, price 20/28. Shop: 167x224, padding
	   12/16/16/12 - 12 on the left and 16 on the right, so the photo sat 4px off
	   centre in its own card - title Lora 16/20 on one line, price 16/24. Two
	   cards, seven differences, same component.

	   The shop's proportions win and the home page adopts them, because that is
	   the size the card is at when a shopper is comparing several of them.

	   THE FRAME IS 12px ON ALL FOUR SIDES and the photo no longer bleeds out of
	   it, so "gaps to the right/left" and "between elements and the border" are
	   one number instead of four.

	   THE PRICE LINE IS EXACTLY AS TALL AS THE BAG BESIDE IT. The bag is
	   absolutely positioned - it is a sibling of the price, not a child - so the
	   only way the two line up is if the price's line box is the button's
	   height. 36px both, both 12px off the bottom, centres identical. That is
	   the "because I wanted it to be" version of a row that used to have the
	   price 6px higher than the disc next to it. */
	.vyt-card,
	.vyt-card--compact {
		min-height: 0;
		padding: 12px;
	}

	.vyt-card__media {
		margin: 0 0 12px;
	}

	/* 20px Lora over two lines on the home page against 16px on the shop. 16,
	   and in Inter - see "the serif" below. */
	.vyt-card__title,
	.vyt-card--compact .vyt-card__title {
		margin: 0;
		font-size: 16px;
		line-height: 20px;
	}

	.vyt-card__price,
	.vyt-card--compact .vyt-card__price {
		margin: auto 0 0;
		padding-top: 12px;
		/* 48px of clearance so a four-digit price never runs under the bag. */
		padding-right: 48px;
		font-size: 16px;
		/* = .vyt-card__add's height. Not a typographic value - an alignment. */
		line-height: 36px;
	}

	.vyt-card__add {
		right: 12px;
		bottom: 12px;
	}

	/* --- The category tiles --------------------------------------------

	   "Kategorijos name text is way too low."

	   Exactly right, and the measurement says why: the tile is
	   `padding: 8px 8px 0` - no bottom padding at all - and the label carries
	   `margin-top: 28px`, which is node 1:1413's distance under a 1440px frame's
	   photograph. At 390 that put 28px above the label and 9px below it inside a
	   171px floor, so the name was pinned to the bottom edge of its own tile.

	   12px above, 12px below, 12px all round. The floor goes with it: a tile
	   that is the sum of its parts cannot have dead space in it. */
	.vyt-cat {
		min-height: 0;
		padding: 12px;
	}

	.vyt-cat__label {
		margin-top: 12px;
	}

	/* --- The icon beside a title ---------------------------------------

	   "Mes ne tik parduodame sections icons are still too high compared to the
	   text."

	   Measured: the 32px disc sat at y=1753 and its title's line box at y=1757,
	   so the icon started 4px ABOVE the first letter of the title. It is the
	   arithmetic of `align-items: center` on a grid row whose height the icon
	   itself sets - the 20px title gets centred inside the 32px the icon needs,
	   and an icon centred against one line of a two-line block reads as floating
	   above it.

	   The same page's process steps (`.vyt-step`) top-align their disc with
	   their title and Matas did not complain about those, so top-aligned is the
	   answer the site already had - it just was not used in both places.

	   The disc spans BOTH rows and pins itself to the top, which takes it out of
	   the row-height calculation entirely. Row one is then the title's own 20px
	   and row two is the copy, so the title-to-copy gap is the 4px the grid
	   declares rather than the 12px that fell out of a 32px row. */
	.vyt-story__feature {
		align-items: start;
	}

	/* `span 2`, NOT `1 / -1`. This grid declares columns only, so every row is
	   implicit and the explicit grid has no row lines for `-1` to name - it
	   resolved to `1 / 1`, the disc stayed in row one, row one stayed 32px tall
	   and the title-to-copy gap measured 16px instead of the 4px the grid
	   declares. Measured, not reasoned: the probe read p at y=1701 when the
	   title ended at 1685. */
	.vyt-story__feature .vyt-icon {
		grid-row: 1 / span 2;
		align-self: start;
	}

	.vyt-story__feature h3 {
		margin-bottom: 0;
	}

	/* --- The serif ------------------------------------------------------

	   "And why does the weird nice font still appear on the mobile site? It
	   should be replaced." Second time he has raised it; the first pass moved
	   fourteen small labels to Inter and left everything 20px and over in Lora,
	   and that split is what he is rejecting.

	   WHAT IS LEFT, audited across all seven pages: two things under 20px that
	   are not headings at all - a product card's name and a FAQ question - and
	   the band-opening h1/h2 of every section.

	   Both of the first kind go to Inter. A product name in Lora at 20px sitting
	   directly under a section heading in Lora at 24px is the specific thing
	   that reads as random: nothing distinguishes the label from the heading, so
	   the serif stops meaning "this opens a section" and starts looking like it
	   arrived by accident. With the card name in Inter, Lora on the phone means
	   one thing and only one thing.

	   THE HEADINGS THEMSELVES ARE NOT TOUCHED HERE and that is the open
	   question, not an oversight - stripping Lora from every h1/h2 would make
	   the phone and the desktop different brands, so it is his call and it is
	   one line if he wants it. Flagged to him in the same breath as this
	   commit. */
	.vyt-card__title,
	.vyt-card__title a,
	.vyt-faq__question {
		font-family: var(--wp--preset--font-family--body);
		font-weight: 600;
		letter-spacing: 0;
	}
}

/* ======================================================================
   THE GAP PASS, PART TWO - every page, 2026-09-01
   ======================================================================

   Part one fixed the homepage components Matas named. He also said: "AND ALL OF
   THESE ISSUES ARE REPEATING THROUGHOUT THE WHOLE SITE. THIS IS JUST THE
   HOMEPAGE." He is right, and eyeballing seven pages would have missed some of
   it again, so `tools/gap-audit.mjs` exists now: it walks every visible element
   on every page and reports padding, margin and gap values that are not on the
   phone's four-step scale, frames whose left and right differ, fixed heights
   holding more than they fit, and the distinct vertical joins per page.

   It found 41 on Pagrindinis alone and about 150 across the seven. Everything
   below is one of its findings; the value in the comment is what it measured.

   THREE CAUSES ACCOUNT FOR NEARLY ALL OF THEM, and they are worth naming:

     1. A DESKTOP DISTANCE, TRANSCRIBED. 40px of panel padding, a 40px footer
        gutter, a 28px timeline indent, a 36px margin over a promise list. Each
        one is measured off a 1440px frame and each one is a different fraction
        of the screen at 390.

     2. A CONTROL THAT NEVER GOT RESET. `.vyt-newsletter__submit` computed
        `padding: 1px 6px` - the browser's own <button> padding, exactly like
        `.vyt-nav-toggle` did. A rule that sets `border: 0` and a width but not
        `padding` leaves the UA stylesheet in charge of the rest.

     3. A FIXED HEIGHT ON TEXT. Eight headings measured "height 64 holds 66" or
        "32 holds 34" - two pixels of a descender outside the box the heading
        declares. Invisible until a longer word arrives, and then it clips.

   THE GUTTER IS 20px AND THAT IS DELIBERATE, not a fifth scale step. It is
   `--wp--custom--gutter` at this breakpoint, it is the same on every page, and
   moving it to 16 or 24 would change the content column's width everywhere
   this late for no gain. The audit knows about it; nothing else may use 20. */

@media ( max-width: 782px ) {

	/* --- 1. Controls that never got a reset ----------------------------- */

	/* `padding: 1px 6px` measured - the UA default, inside a button that
	   declares a 30x28 box. Same fault as the menu toggle. */
	.vyt-newsletter__submit,
	.vyt-form__submit {
		padding: 0;
	}

	/* --- 2. Buttons: four heights for one control ----------------------- */

	/* CORRECTION, and it is worth writing down because it nearly went in as a
	   fix. The audit's first "CRAMPED" list named eight headings as fixed
	   heights clipping their own text - `.vyt-gift__title` "height 64 holds
	   66", and so on. Not one of them declares a height. `getComputedStyle`
	   returns the USED height of a laid-out element, never `auto`, so reading it
	   back cannot tell you whether anybody wrote one; and `scrollHeight` rounds
	   up and counts a descender. Eight findings, all noise, and a rule setting
	   `height: auto` on elements that were already auto would have "fixed" them
	   invisibly. The check now walks `document.styleSheets` for a DECLARED
	   height and re-measures the element with that height released - the same
	   discipline that this build needed for the order-note textarea, applied to
	   the tool instead of to a rule.

	   WHAT IT FINDS WHEN IT ASKS PROPERLY: buttons. `.wp-block-button__link` is
	   52, `.vyt-btn--compact` is 44, `.vyt-cta--plain .is-compact` is 48 and
	   `.vyt-cta-dark__button` is 49 - four heights, all declared, for one
	   control, and 49 in particular is not a number anybody chose. On a phone
	   every button is 48: it clears the 44px tap target, it is on the scale, and
	   it is ONE value.

	   `height` becomes `min-height` rather than being released, because a
	   button's height IS a decision - it just has to be a floor so a long
	   Lithuanian label cannot draw the pill's own border through itself, which
	   is what the hero's outline button was doing. */
	.wp-block-button__link,
	.vyt-btn--compact,
	.is-compact .wp-block-button__link,
	.vyt-cta--plain .is-compact .wp-block-button__link,
	.vyt-cta-dark__button .wp-block-button__link,
	.vyt-giftband__button,
	.vyt-hero__actions .wp-block-button__link,
	.vyt-hero__actions .wp-block-button.is-style-outline .wp-block-button__link {
		box-sizing: border-box;
		height: auto;
		min-height: 48px;
		/* 22, NOT the 26 the buttons inherit. With `padding-block: 12` a 26px
		   line makes the solid pill 50 and the outline pill 52, because the
		   outline's 1px border is inside its own border box and the solid one
		   has no border to absorb - so the floor never binds and two buttons
		   sitting one above the other measure 2px apart. At 22 the content is
		   46 for the solid and 48 for the outline, the 48px floor binds on both,
		   and they are the same height by construction rather than by luck.
		   Any label that wraps still grows the pill; the floor is a floor. */
		line-height: 22px;
	}

	/* 42px declared, stretched to 44 by its row, and a category name needs 46 at
	   this width - so the longest pill draws its text through its own edge. */
	.vyt-catbar__pill {
		height: auto;
		min-height: 44px;
	}

	/* --- 3. The footer, on every page ----------------------------------- */

	/* 40px between one stacked footer column and the next, five times a page,
	   and 40px of column-gap in a grid that is one column wide down here. The
	   columns are a stack on a phone, so the join between two of them is a join
	   between two blocks of the same kind: 32. */
	.vyt-footer__columns {
		row-gap: 32px;
		column-gap: 0;
	}

	/* --- 4. Desktop distances, page by page ----------------------------- */

	/* Pagrindinis. The dark story panel: 40px of padding at 1440 is 10% of a
	   390px screen once the 20px gutter is counted. 24. */
	.vyt-story__panel {
		padding-block: 24px;
	}

	.vyt-story__lead {
		/* 40 measured, between the lead and the "Skaityti daugiau" link. */
		margin-bottom: 24px;
	}

	.vyt-gift__panel {
		/* 28 measured. */
		padding-block: 24px;
	}

	.vyt-delivery {
		/* 20 on all four sides - not the gutter, this is a card's own frame. */
		padding: 24px;
	}

	/* 3px and 1px of margin under a heading. Neither is a decision; both are
	   what was left over after a line-height was chosen. 4 is the step. */
	.vyt-delivery h3,
	.vyt-step h3,
	.vyt-trust__copy,
	.vyt-map-card__route-cta {
		margin-top: 0;
		margin-bottom: 4px;
	}

	/* The hero photograph is pulled up 17px on the desktop so its top edge
	   lines up with the heading beside it (node 1:1318). Stacked on a phone
	   there is nothing beside it, so the pull just made the join under the
	   buttons 15px where every other join on the page is 24. */
	.vyt-hero__media {
		margin-top: 0;
	}

	/* Parduotuvė. */
	.vyt-trust__list {
		/* 40px of column-gap in a list that stacks down here. */
		column-gap: 0;
		row-gap: 16px;
	}

	.vyt-trust__item {
		/* 20 measured, between a trust icon and its words. */
		gap: 12px;
	}

	.vyt-shop__toolbar {
		/* 28 measured, between the toolbar and the results. */
		margin-bottom: 24px;
	}

	.vyt-shop__main {
		/* 28 measured, twice - shell to main, and main to results. */
		row-gap: 24px;
	}

	.vyt-giftband__card {
		/* 20 measured. */
		padding: 24px;
	}

	.vyt-giftband__button {
		/* 20 measured above a button that opens a different page: 24. */
		margin-top: 24px;
	}

	.vyt-giftband__photo {
		/* 20 above, and the audit read the join under it as 44. */
		margin-top: 24px;
	}

	.vyt-catbar__pill,
	.vyt-filter__clear {
		/* 20 of horizontal padding on a pill whose vertical padding is 12. */
		padding-inline: 16px;
	}

	/* Apie mus. */
	.vyt-hero__lead {
		/* 28 measured. */
		margin-bottom: 24px;
	}

	/* A 16px indent on the left and nothing on the right. It is node 1:1711's
	   own indent inside a 1440px panel, and on a 350px column it is exactly the
	   "everything is pushed left" Matas has now raised three times. */
	.vyt-about-who__text > p,
	.vyt-about-who__text > h2 {
		padding-left: 0;
	}

	.vyt-timeline {
		/* 28 - the rail's own room. It only has to clear a 12px marker. */
		padding-left: 24px;
	}

	.vyt-about-quality {
		/* 20 on all four sides. */
		padding: 24px;
	}

	.vyt-about-promises {
		/* 20 measured. */
		margin-top: 24px;
	}

	/* Pristatymas ir apmokėjimas. 36, 35, 34 and 28 - four values for one join,
	   which is the "no one who would genuinely make the page would have gaps
	   like that" case in its purest form. They are all the same join. */
	.vyt-promise__list,
	.vyt-pay__banks,
	.vyt-pay__marks,
	.vyt-pay__list {
		margin-top: 24px;
	}

	.vyt-bulk__media {
		/* 20 measured. */
		margin-bottom: 24px;
	}

	.vyt-faq__question,
	.vyt-faq__answer {
		/* left 16 against right 24. The 24 was room for the chevron, but the
		   chevron is positioned, so the padding was only ever visual. */
		padding-inline: 16px;
	}

	/* Kontaktai. */
	.vyt-form-card {
		/* 40 on all four sides - the largest frame on the site, on the page
		   with the least room for it. */
		padding: 24px;
	}

	.vyt-map-card__route {
		/* 40 measured. */
		margin-top: 24px;
	}

	.vyt-contact-cards,
	.vyt-contact-card + .vyt-contact-card {
		/* 28 measured between one contact card and the next, four times. */
		row-gap: 24px;
	}

	/* Krepšelis and Atsiskaitymas. */
	.vyt-empty-cart__news {
		/* 56 measured. It is a heading opening a band inside a page, not a new
		   section, so it takes the heading step and not the section rhythm. */
		margin-top: 24px;
	}

	.vyt-progress {
		/* 40 under the rail. */
		padding-bottom: 24px;
	}

	.wp-block-woocommerce-cart {
		/* 40 measured above the empty-cart panel. */
		padding-top: 24px;
	}

	/* The empty cart's own product tiles: 19px over the price, and a frame that
	   is 12 at the top and 16 at the bottom. Both are the plugin's, and both are
	   the card shape part one already settled. */
	.wc-block-grid__product {
		padding-block: 12px;
	}

	.wc-block-grid__product-price {
		margin-top: 8px;
	}

	/* --- 5. The buttons ------------------------------------------------- */

	/* 13px of vertical padding measured on four pages and 21.3px of horizontal
	   on the outline pill beside a 28px one - both are `em` values resolving off
	   a font size, which is why they land on thirds of a pixel. A control's
	   frame is a decision, not a by-product of its type size. */
	.wp-block-button__link,
	.vyt-gift__body .wp-block-button__link,
	.vyt-giftband__button,
	.vyt-hero--about .wp-block-button__link {
		padding-block: 12px;
		padding-inline: 24px;
	}
}

/* ======================================================================
   THE GAP PASS, PART THREE - the rules that lost
   ======================================================================

   Part two's second run found six of its own rules doing nothing, and every one
   of them for the same reason: something more specific already owned the
   property. This is the fault this build keeps hitting - the checkout's order
   note took four attempts because a three-class WooCommerce selector quietly
   won each time - so none of the six below is a guess. Each was found by
   walking `document.styleSheets` for the rules that MATCH the element and
   reading which value the cascade actually took.

   THE WINNER, IN EACH CASE:

     .vyt-empty-cart__news.vyt-empty-cart__news  - the class doubled to raise
        its own specificity, which is a technique for winning exactly this fight
     .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price
     .wp-block-woocommerce-empty-cart-block .wc-block-grid__products
        .wc-block-grid__product                 - the plugin's own two- and
        three-class selectors
     .vyt-hero--about .vyt-hero__lead           - a page variant
     .vyt-shop__rail .vyt-filter__clear         - a context
     img.vyt-giftband__photo                    - the `img.` prefix that the
        README already records as load-bearing against `.woocommerce img`

   Matching their specificity rather than reaching for `!important`, because the
   next person to read this needs to be able to override it too. */

@media ( max-width: 782px ) {

	.vyt-empty-cart .vyt-empty-cart__news.vyt-empty-cart__news {
		/* 56 measured, above a heading that opens a band inside a page. */
		margin-top: 24px;
	}

	.wp-block-woocommerce-empty-cart-block .wc-block-grid__products .wc-block-grid__product {
		/* 12 at the top against 16 at the bottom. */
		padding-block: 12px;
	}

	.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
		/* `margin: auto` resolved to 22px over the price. */
		margin-top: 8px;
		margin-bottom: 0;
	}

	.vyt-hero--about .vyt-hero__lead {
		/* 28 measured. Every other lead on the site is 24. */
		margin-bottom: 24px;
	}

	.vyt-shop__rail .vyt-filter__clear {
		/* 20 of horizontal padding on a control whose vertical padding is 12. */
		padding-inline: 16px;
	}

	img.vyt-giftband__photo {
		/* 20 above the photograph, and the audit read the join under it as 44. */
		margin-top: 24px;
	}

	/* WordPress's own `:root :where(.wp-element-button, .wp-block-button__link)`
	   sets `padding: calc(.667em + 2px) calc(1.333em + 2px)`, which is why two
	   buttons on Apie mus measured 20px on the left against 24 on the right -
	   an em-derived frame rounding differently on either side of a label. */
	.wp-block-button.is-style-outline .wp-block-button__link {
		padding-inline: 24px;
	}

	.vyt-map-card__route-cta {
		/* 3px of gap between the label and its chevron. */
		gap: 4px;
	}
}

/* ======================================================================
   THE GAP PASS, PART FOUR - the last of them
   ====================================================================== */

@media ( max-width: 782px ) {

	/* 28 measured, twice: the shop's rail-and-results grid and Kontaktai's three
	   contact cards. Part two aimed at `.vyt-shop__main` and `.vyt-contact-cards`
	   and neither owns the gap - it is declared on the grid itself, which also
	   carries `.vyt-shell`, so the audit could only report it as `div.vyt-shell`
	   and the name in the report was not the name in the stylesheet. Found by
	   grepping for the value rather than for the element. */
	.vyt-shop__grid,
	.vyt-contact-cards__grid {
		gap: 24px;
	}

	/* A bare `h2` inside a contact card - "Telefonas", "El. paštas", "Adresas". */
	.vyt-contact-card h2 {
		margin-top: 24px;
	}

	.vyt-about-story__media {
		/* 36 measured between the story text and its photograph. */
		margin-top: 32px;
	}

	.vyt-skip-link {
		/* 20 - the gutter's value on a control that is not the page frame. It is
		   off-screen until it is focused, so this is tidiness rather than a bug,
		   but a value that means "gutter" should not appear anywhere else. */
		padding-inline: 16px;
	}
}

@media ( max-width: 782px ) {

	/* Two joins that are the SUM of two margins, which is why setting one of
	   them to a scale value did not produce a scale value. The story photograph
	   follows a block that already carries 32px of margin below it, so its own
	   32 made the join 64; the contact form's submit follows a field with 16px
	   under it, so its 12 made the join 28. Measured both sides, then set the
	   near side to whatever leaves the join on the scale. */
	.vyt-about-story__media {
		margin-top: 0;
	}

	.vyt-form__submit {
		margin-top: 8px;
	}

	/* The contact form's submit is a plain <button>, not a block button, so the
	   48px every other button on the phone now carries had missed it - it
	   measured 44. */
	.vyt-form__submit,
	.vyt-bulk__button {
		min-height: 48px;
	}

	/* AND IT FILLS THE FORM. Every field above it is the card's full width and
	   the submit was a natural-width pill at the left edge - the off-centre
	   check read it as left 0 against right 193, and it is the same "everything
	   is anchored left" Matas keeps finding. Its label was hard against the
	   pill's left edge too, because the frame came from a rule that set a height
	   and no horizontal padding. */
	.vyt-form__submit {
		width: 100%;
		justify-content: center;
		padding-inline: 24px;
	}
}

/* ======================================================================
   THE GAP PASS, PART FIVE - the round the audit could not see
   ======================================================================

   Seven more from Matas, and one of them explains why the last pass reported
   clean pages: HIS PHONE IS NOT 390 WIDE. `.vyt-bulk__title` carries
   `max-width: 286px` and no auto margins, so at 390 the card's content box is
   286 and the heading fills it exactly - perfectly centred, by coincidence. At
   430 the same box is 366 and the heading sits with 1px on its left and 39 on
   its right. Every check in this repo ran at 390.

   THE CLASS, and it is worth naming because it will keep happening: A
   MAX-WIDTH INSIDE A CENTRED BLOCK IS OFF-CENTRE AT EVERY WIDTH BUT ONE. The
   text is centred inside the box; the box is not centred inside its parent. It
   looks right at exactly the width where the cap and the column happen to
   match, and that is the width the cap was copied from.

   The other thing the audit could not see: THE MENU PANEL IS CLOSED WHEN IT
   RUNS. Its 40px flex gap and 54px rows were never sampled by anything. */

@media ( max-width: 782px ) {

	/* --- 1. The menu panel ---------------------------------------------
	   "The mobile menu is too tall, the gaps are all weirdly big."

	   Measured with the panel open: 456px tall on an 844px screen. The panel is
	   `padding: 24px 20px 48px` with `gap: 40px`, and the head row adds its own
	   24px of margin below itself - so the distance from the logo row to the
	   first link was 40 + 24 = 64px, which is not a value anybody chose, it is
	   two spacings stacking. The links are 18px in 16px of vertical padding,
	   which makes 54px rows.

	   24 between the head and the list, 48px rows. The rows stay well over the
	   44px tap target and the panel loses roughly a hundred pixels. */
	.vyt-nav {
		padding-bottom: 24px;
		gap: 24px;
	}

	.vyt-nav__head {
		margin-bottom: 0;
	}

	.vyt-nav__list a,
	.vyt-nav a {
		padding-block: 12px;
		line-height: 24px;
	}

	/* --- 2. The shop's category pills ----------------------------------
	   "The categories should all the fill in and not pushed to the left."

	   They are a wrapping flex row of natural-width pills, so every line ends
	   wherever the last word ended and the right edge is ragged. Two equal
	   columns instead, and the seventh takes the whole row rather than sitting
	   alone in the left half - the same rule the category tiles on the home page
	   already use, so the two grids on the site that hold an odd number of
	   things now behave the same way. */
	/* TWO EQUAL COLUMNS WAS THE FIRST ANSWER AND IT WAS WORSE. Screenshotted:
	   at 169px a pill holds about 111px of label, and "Žuvies užkandžiai" needs
	   118 - so it broke onto two lines and sat in a row with a one-line pill
	   beside it. A fixed column count decides the width before it knows the
	   words.

	   Wrapping flex with `flex: 1 1 auto` instead: each line takes as many pills
	   as fit at their natural width and then shares out the slack, so every line
	   reaches both edges, no label ever wraps inside its own pill, and the
	   seventh takes the last line by itself. Nothing here is a count or a width
	   - the labels decide, which is what has to be true when the client renames
	   a category. */
	.vyt-catbar__list {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	/* THE GROW GOES ON THE `li`, NOT ON THE PILL. The pill is an `<a>` inside a
	   list item, so the list item is the flex item and `flex-grow` on the anchor
	   is inert - the computed style read `flex-grow: 1` on the pill the whole
	   time it was doing nothing, which is exactly the reading that would have
	   confirmed a wrong fix. The screenshot is what caught it. `display: flex`
	   on the anchor then makes it fill whatever the item became. */
	.vyt-catbar__list > li {
		display: flex;
		flex: 1 1 auto;
	}

	.vyt-catbar__pill {
		display: flex;
		width: 100%;
		justify-content: center;
		white-space: nowrap;
	}

	/* --- 3. The timeline's dots -----------------------------------------
	   "Apie mus timeline circles are not centred inside of the vertical line."

	   Measured: the rail sits at x=26..27 and the 14px dot at x=16..30, so the
	   dot's centre is 23 and the rail's is 26.5 - three and a half pixels apart.
	   Two independent numbers, `left: 6px` on the rail and `left: -28px` on the
	   dot, that had to agree and never did; the last pass moved the list's
	   indent from 28 to 24 and made it worse.

	   ONE NUMBER NOW. The indent is a custom property, the dot hangs by exactly
	   that much so its left edge lands on the list's own left edge, and the rail
	   is positioned at half the dot and pulled back half its own width - so it
	   is centred on the dot by construction and cannot drift again whatever the
	   indent becomes. `translateX(-50%)` rather than a hand-computed 6.5px,
	   because a half-pixel written into the stylesheet is a half-pixel somebody
	   later rounds. */
	.vyt-timeline {
		--vyt-rail-indent: 24px;
		--vyt-dot: 14px;
		padding-left: var( --vyt-rail-indent );
	}

	.vyt-timeline__dot {
		left: calc( var( --vyt-rail-indent ) * -1 );
	}

	.vyt-timeline::before {
		left: calc( var( --vyt-dot ) / 2 );
		transform: translateX( -50% );
	}

	/* --- 4. The numbered promises ---------------------------------------
	   "the Kokybe ir naturalumas section icons are not vertically centred with
	   the texts beside it."

	   The row IS `align-items: center`; the badge carries `margin-bottom: 8px`.
	   Centring works on the MARGIN box, so a 20px badge with 8px under it is
	   centred as a 28px block and the disc itself lands 4px high. Measured: badge
	   centre 3962.3 against a row centre of 3966.3.

	   The margin is a desktop leftover - there the badge sits above its label
	   rather than beside it. */
	.vyt-about-promises__badge {
		margin-bottom: 0;
	}

	/* --- 5. The payment methods -----------------------------------------
	   "There must be some kind of way to make the payment options not look
	   really dumb on google/apple pay with those empty spaces below it?"

	   Two faults, both fixed numbers off the desktop frame. `min-height: 232px`
	   on every card, which the bank card genuinely needs for its three bank
	   names and the Apple and Google cards do not - and stacked in ONE column
	   equal heights buy nothing, because nothing sits beside them to line up
	   with. And `max-width: 150px` on the card's copy, which is why "Greitas ir
	   patogus atsiskaitymas su Apple įrenginiais." broke into three short lines
	   in a card 350px wide while the sentence beside it used the full width.

	   Height comes from content and the copy uses the card. Desktop keeps both:
	   there the four cards ARE a row and equal heights are the point. */
	.vyt-pay__list > li {
		min-height: 0;
	}

	/* THE 150px MEASURE ON THE TWO WORDMARK CARDS STAYS. It looks like the same
	   fault - a desktop cap inside a 350px card - and it is not: Matas asked for
	   it directly ("apply pay and google pay cards descriptions dont wrap like
	   theyre supposed to"), it reproduces the design's three-line break, and the
	   copy is centred so the cap costs no symmetry. Releasing it here was
	   written and then removed; the empty space below the card was the actual
	   complaint and `min-height` was the whole of it. */

	/* --- 6. The bulk-order heading --------------------------------------
	   "the Susisiekite largest text is not centred at all."

	   `max-width: 286px` with no auto margins - see the note at the top of this
	   block. Released rather than auto-centred: the cap is a line-length
	   decision made at 1440 and the phone's column is already the measure. */
	.vyt-bulk__title {
		max-width: none;
	}

	/* --- 7. The cart's thumbnails ---------------------------------------
	   "Cart page added product images are some like weird tall rectangles. They
	   should all be squares and be the same dimensions no matter what size the
	   images are and they should match on the checkout page as well."

	   Measured: 56x93 in the cart, 64x64 at the checkout. The image declares
	   `aspect-ratio: 1/1` and never gets it, because an earlier fix gave the
	   cell `grid-row: 1 / -1` and `align-self: stretch` so it would stop
	   covering the product name - and a stretched cell makes its image as tall
	   as the whole row.

	   The cell still spans the row, so the name and the counter keep their own
	   column. The image stops filling it: 64px square, which is the number the
	   checkout already uses, so the same product is the same shape in both
	   places. */
	/* The rule that actually owns this is the 782 block further up - written
	   there rather than here because a `.wc-block-cart-item__image img` added
	   at the end of the file (0,1,1) still loses to the
	   `table.wc-block-cart-items ...` selector (0,3,1) that was already
	   stretching the picture. Reading the cascade found that in one pass; a
	   fifth attempt at the wrong rule would not have. */
}

/* ======================================================================
   THE CART ROW - third attempt, and this one was compared, not reasoned
   ======================================================================

   Matas: "This looks even worse now. CAN YOU PLEASE VISUAL PASS CYCLE IT UNTIL
   IT LOOKS NICE?? use an independent reviewer if you want."

   Both previous attempts were single decisions defended in prose. This one was
   built as NINE variants, rendered on the running cart, put side by side as one
   image and looked at. What follows is the one that won and the reason each
   other lost, because the losers are the argument.

   AND THE CART HAD ONE PRODUCT IN IT FOR EVERY REVIEW BEFORE THIS. Three of the
   four products in this shop are variable and one is a draft, so
   `?add-to-cart=<id>` silently added nothing for three of them and every
   screenshot was of a single row. A one-row cart cannot show whether a cart
   reads as a list. Filling it needs the variation id AND its attribute:

       /?add-to-cart=37&variation_id=38&attribute_pa_svoris=250-g&quantity=2

   THE COMPOSITION. Information on the top, controls on the bottom, and the
   thumbnail as tall as the pair:

       [        ]  Dovanu rinkinys              116,00 EUR
       [   88   ]  29,00 EUR
       [        ]  Svoris: 250 g
       [        ]  [ -   4   + ]                     [bin]

   FOUR EDGES AND EVERY ELEMENT IS ON ONE. Left: the thumbnail, then the name,
   the price, the variation and the stepper all at 122. Right: the line total
   and the bin, both at 368. Nothing sits in the middle of anything.

   WHY 88 AND NOT 64 OR 80. Measured, not chosen: the copy plus the stepper
   stacks to about 93px, so at 64 the thumbnail left a 29px hole under itself and
   the left column stopped halfway down the row; at 96 it overhung the text. 88
   is the size at which the picture and the words end together, which is what
   makes the row read as one object. The first two attempts used 64 - a number
   that came from the checkout's summary, where the row is half this tall.

   WHY THE TOTAL IS TOP RIGHT AND THE BIN IS BOTTOM RIGHT. Tried the other way
   round (the bin beside the name, the total beside the stepper) and it is the
   layout Matas rejected: the bin next to a product name is the most destructive
   control on the page sitting where the eye lands first, and it leaves the
   controls row anchored on one side only. This way the two facts a shopper
   wants - what it is, what it costs - are the top line, and the two things they
   can do to it are the bottom line.

   WHY THE BIN IS NOT NEXT TO THE STEPPER. That was variant `a1` and it is what
   the second attempt shipped. It groups the controls, which sounds right, and
   it leaves 124px of nothing between the bin and the row's right edge - the
   same hole the first attempt had, moved. A control on an edge is placed; a
   control 124px short of one is stranded.

   WHY WOOCOMMERCE'S OWN LAYOUT LOST. Variant `c` reproduces `cart.css` at its
   699 container breakpoint - the stepper under the thumbnail in the left
   column. It is the most compact of the nine and it puts an 80px-wide stepper
   under an 80px picture with the whole right half of that row empty. It also
   hides the remove control entirely, which is not a trade this shop should
   make.

   THE STEPPER STAYS 148x44. A 120x40 variant reads better in isolation and it
   costs the three controls inside it their 44px targets, and Matas has already
   settled that this pill is the same everywhere ("lets just keep all the
   counters throughout the site looking the same"). Not re-opened here. */

@media ( max-width: 782px ) {

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		display: grid;
		/* FOUR COLUMNS, AND THE MIDDLE TWO ARE WHY IT FITS. The unit price and
		   the variation are both 13px grey metadata about the same product, and
		   on separate rows they cost 18px that the 88px picture does not have to
		   give - which is what pushed the counter below the photograph and made
		   a row with a variation 17px taller than one without. Matas saw the
		   second part as "the gap becomes bigger as more items are added"; the
		   gap between rows is zero, the ROWS were 129 and 146.

		   Column 2 sizes to the price, column 3 takes the rest, and the name,
		   the counter and the picture all span across them. `column-gap: 8` is
		   the space between the price and the variation; the picture carries its
		   own extra 8 as a margin so the gap to the copy stays 16. */
		grid-template-columns: 88px auto minmax( 0, 1fr ) auto;
		grid-template-rows: auto auto auto;
		column-gap: 8px;
		/* Zero, and every gap below is a margin: the variation row is empty for a
		   simple product, and a `row-gap` would put 4px of nothing between the
		   price and the stepper on every simple line in the basket. */
		row-gap: 0;
		align-items: start;
		padding-block: 16px;
	}

	/* THREE WRAPPERS DISSOLVE, NOT TWO. The stepper is inside `td.product`, the
	   line total inside `td.total`, and the bin inside `.__quantity` - so the
	   three can only ever meet as items of one grid. Two levels of
	   `display: contents` lifted the stepper out and left the bin behind at
	   x=258, still stuck beside the `+` where it started.

	   Four classes deep because the plugin's own rule for the wrap is
	   `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap`
	   at (0,3,1); a bare class collapsed the cell and left the wrap a flex column
	   inside it, which looked like the change had half worked. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap,
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
		display: contents;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: start;
		width: 88px;
		margin-right: 8px;
	}

	.wc-block-cart-item__image img,
	table.wc-block-cart-items .wc-block-cart-item__image img {
		width: 88px;
		height: 88px;
		min-height: 0;
		max-width: 88px;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	/* THE CHECKOUT'S SUMMARY FOLLOWS THE CART. Matas asked for the two to match
	   ("they should ... match on the checkout page as well") and the base rule
	   fixes the summary at 64, so moving the cart to 88 broke the pair the same
	   day it was measured. Both are 88 on a phone; the base 64 still governs the
	   desktop, where the summary is a narrow rail. */
	/* THE SUMMARY KEEPS ITS OWN SHAPE, and that is a reversal made the same
	   minute it was tried. Giving it the cart row's grid - name and total on one
	   line - looked right in the abstract and wrapped "Dovanu rinkinys" onto two
	   lines the moment it rendered, because an 88px thumbnail plus a total leaves
	   the name about 168px on this page against the cart's 246. The summary's row
	   is half the cart's height and it is a recap, not a working list.

	   What Matas actually asked for here is the picture: "they should all be
	   squares and be the same dimensions no matter what size the images are and
	   they should match on the checkout page as well." The thumbnail matches. The
	   layout around it does not have to, and forcing it made this page worse.

	   THE TYPE DOES HAVE TO MATCH THOUGH. The cart's product name moved to Inter
	   16/600 and this one was still Lora, so the same basket described itself in
	   two faces on two screens a shopper sees back to back - the same fault
	   Matas named in the cart ("the product name text being the different font
	   also makes it look smaller"), one page over.

	   And the copy is centred against the picture rather than stacked from its
	   top: this row has two or three short lines beside an 88px square, so
	   top-aligning left a block of dead space under the price. The cart's row
	   fills its 88 exactly and so has nothing to centre. */
	/* 72 HERE, 88 IN THE CART, AND THAT IS THE HONEST ANSWER RATHER THAN THE
	   LITERAL ONE. Matas asked for the thumbnails to match, and they did at 88
	   until this row was measured: the summary sits inside nested paddings that
	   leave it 316px against the cart's 350, so an identical 88px square took
	   31% of the row and handed the product name 125px - "Dovanu rinkinys" broke
	   onto two lines here and not in the cart, at the same type size, purely
	   because of the column. Two of those paddings were removed and the last one
	   would not release without an `!important` fight that is not worth what it
	   buys.

	   72 is the largest square this row holds with the name on one line. What
	   actually matches across the two pages is what he was pointing at - a
	   square, cropped the same way, at the same radius, with the same type
	   beside it - rather than a number that makes the narrower component worse
	   to satisfy it. */
	/* AND THE ROW GETS 32px BACK. The summary sits inside two nested 16px
	   paddings that left it 284px against the cart's 350 - that, not the type
	   size, is why "Dovanu rinkinys" broke onto two lines here at the same 16px
	   it fits on one line in the cart. The cart's items are already flush with
	   the page gutter, so removing them is the two pages agreeing rather than a
	   new decision. Measured: 284 -> 316. */
	.checkout-order-summary-block-fill.checkout-order-summary-block-fill,
	.wc-block-components-order-summary.wc-block-components-order-summary {
		padding-inline: 0;
	}

	.wc-block-components-order-summary .wc-block-components-order-summary-item__image,
	.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
		width: 72px;
		min-width: 72px;
		height: 72px;
	}

	/* TOP, NOT CENTRE. Matas: "make these not float in the middle but land on
	   either the top or the bottom... Like similar to how the cart is made."
	   Centring was put here to close the dead space under a two-line block
	   beside a taller picture, and it bought that at the cost of the one thing
	   the cart row gets right - a shared top edge. The name, the variation and
	   the price now start level with the photograph, exactly as they do in the
	   cart; the picture is simply taller than they are, and space under a
	   photograph reads as the row's own air rather than as a misalignment. */
	.wc-block-components-order-summary .wc-block-components-order-summary-item {
		align-items: flex-start;
	}

	/* AND THE NAME TAKES THE SLACK. The description is `flex: 0 1 auto`, so it
	   sizes to its content and left 30px of the row unused between itself and
	   the price - the name wrapped while empty space sat beside it. */
	.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
		flex: 1 1 auto;
		/* Only the right. Dropping the left too put the name hard against the
		   photograph - the 12px there is the gap, not slack.

		   THE NAME STILL WRAPS AT 16px IN THIS ROW and it is left wrapping. It
		   reports 125px wide inside a 179px description even with `width: 100%`
		   on it, so something in the plugin's own sizing caps it and the next
		   step is an `!important` fight on a recap panel. The alternative is
		   setting this name smaller than the cart's, which trades a two-line
		   name for the exact inconsistency Matas asked to remove. Left as is,
		   and written down rather than quietly shrunk. */
		padding-right: 0;
	}

	/* The name is a flex item inside that description and sizes itself the same
	   way, so widening the description alone changed nothing: it went 149 -> 179
	   and the name stayed 125 and stayed on two lines. */
	/* `max-width: max-content` WAS THE CAP, and it is why every other lever
	   failed. The name reported 125px inside a 179px description with
	   `width: 100%`, `flex: 1` and `align-self: stretch` all applied and all
	   ignored - a max-width beats every one of them. 125 is the one-line width
	   this string had at the 13px Lora it used to be set in; at 16px Inter it
	   needs about 140, so the box kept the old measurement and the words wrapped
	   inside it. Two rounds of "make the container wider" could never have
	   worked, and both were spent before this was measured. */
	.wc-block-components-order-summary .wc-block-components-product-name {
		align-self: stretch;
		max-width: none;
		/* `padding-top: 12px`, AND THAT IS WHY THE NAME STILL LOOKED CENTRED.
		   The box was on the top edge - measured T429, level with the picture and
		   the price - and the GLYPHS were at 441, because the 12px sits above the
		   text. The previous pass zeroed `padding-bottom`, which is the side that
		   was already 0, and measured element boxes rather than text rectangles,
		   so every number said the row was aligned while the screen said it was
		   not. Measuring a Range over the text node is what found it. */
		padding-top: 0;
		padding-bottom: 0;
	}

	.wc-block-components-order-summary .wc-block-components-product-name {
		font-family: var( --wp--preset--font-family--body );
		font-size: 16px;
		font-weight: 600;
		line-height: 20px;
		letter-spacing: 0;
	}

	/* The price carries its OWN `align-self: center`, so top-aligning the row
	   left it behind - measured at T451 against a row and a name both starting
	   at T429. It lands on the name's line now, which is where the cart puts it. */
	.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
		align-self: flex-start;
	}

	.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price,
	.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price .wc-block-components-product-price {
		font-size: 16px;
		font-weight: 700;
		line-height: 20px;
	}

	.wc-block-components-order-summary .wc-block-components-product-metadata,
	.wc-block-components-order-summary .wc-block-components-product-details,
	.wc-block-components-order-summary .wc-block-components-product-details__value {
		color: var( --wp--preset--color--text-soft );
		font-size: 13px;
		line-height: 16px;
	}

	/* THE WHOLE ROW FITS INSIDE THE PICTURE, and the arithmetic is the design:

	       name      16/20   20
	                  +       4
	       price + variation  16
	                  +       8
	       counter           40
	                       = 88   = the thumbnail

	   Every value below is one of those. Change one and the picture stops being
	   the row's height, which is the thing Matas asked for.

	   ONE TYPE SCALE, because there were five sizes and three families in this
	   one row: the name was 13px LORA 500 - smaller than the 16px total beside
	   it and in the serif, which is exactly "the product name text being the
	   different font also makes it look smaller" - the unit price 12px Inter,
	   the variation 13px Inter, the total 16px Inter 700, and the quantity digit
	   13px ARIAL, which is the browser's default and means that input never got
	   a family at all.

	   Two sizes now. 16 for the two things a shopper reads off the line - what
	   it is and what it costs - with weight telling them apart, and 13 for the
	   two grey facts underneath. */
	/* FOUR CLASSES AND AN ELEMENT. cart.css sets this name from
	   `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name`
	   at (0,3,1) - a two-class rule here is later in the file and still loses, and
	   it computed 13px while the stylesheet plainly said 16. Read off
	   `document.styleSheets`; the same trap has now cost this build five separate
	   rules. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
		grid-column: 2 / 4;
		grid-row: 1;
		align-self: start;
		margin: 0;
		padding-right: 12px;
		font-family: var( --wp--preset--font-family--body );
		font-size: 16px;
		font-weight: 600;
		line-height: 20px;
		letter-spacing: 0;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 4;
		grid-row: 1;
		justify-self: end;
		align-self: start;
		margin: 0;
		padding: 0;
		text-align: right;
	}

	/* Row 2 - what one of them costs, and which one it is, on ONE line. */
	.wc-block-cart-item__prices {
		grid-column: 2;
		grid-row: 2;
		margin-top: 4px;
	}

	/* Row 3 - the variation, and it needs its own row rather than sharing row 2
	   on the reading that it is usually empty. The first cart with a VARIABLE
	   product in it printed "Svoris: 250 g" straight through "6,50 EUR". Empty
	   it collapses to nothing, because the rows here are spaced by margins. */
	.wc-block-cart-item__wrap .wc-block-components-product-metadata {
		grid-column: 3;
		grid-row: 2;
		align-self: baseline;
		margin-top: 4px;
	}

	/* Row 4 - the two things a shopper can do to this line, on the two edges. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector {
		grid-column: 2 / 4;
		grid-row: 3;
		justify-self: start;
		margin-top: 8px;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link {
		grid-column: 4;
		grid-row: 3;
		justify-self: end;
		align-self: center;
		/* THE RIGHT RAIL WAS 4px OUT AND THAT IS THE WHOLE REASON THAT SIDE FELT
		   UNRESOLVED - an independent review measured the bin's right edge at
		   343 against the total's 347. The bin is an icon inside a button with
		   its own padding, so it is the BUTTON that was flush and the glyph that
		   was not. Zero the padding and the two land on the same rail. */
		margin: 12px 0 0;
		padding: 0;
		/* A DESTRUCTIVE CONTROL SHOULD BE THE QUIETEST THING IN THE ROW. It was
		   drawn at rgb(47,57,74) against a product name at rgb(6,13,29) - the
		   second-darkest element present, after the photograph. */
		color: var( --wp--preset--color--text-soft );
	}

	/* 16x17px of tappable area at the extreme right edge of a 390px screen -
	   under half the 44px minimum, in the worst place on the phone to reach.
	   The target grows through an overlay rather than through the button's own
	   box, so the icon stays on the rail it was just put on. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link {
		position: relative;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate( -50%, -50% );
	}

	/* THE NUMBER THE SHOPPER CAME FOR WAS THE SMALLER OF THE TWO. The line total
	   was 14px bold beside a 16px product name, so the receipt line put its
	   emphasis on the label rather than on the money. Same size, and the weight
	   carries the difference on its own. */
	.wc-block-cart-item__total .wc-block-components-product-price {
		font-size: 16px;
		/* 20 and not 22: row one is the name's 20px line, and a 22px total would
		   make the row 90 against an 88px picture. */
		line-height: 20px;
	}

	/* The two grey facts, one size AND one grey. They sit on the same line at
	   the same size and were rgb(107,114,128) and rgb(55,65,81) - close enough
	   to look like a mistake rather than a distinction. */
	.wc-block-cart-item__prices,
	.wc-block-cart-item__prices .wc-block-components-product-price,
	.wc-block-cart-item__wrap .wc-block-components-product-metadata,
	.wc-block-cart-item__wrap .wc-block-components-product-metadata li,
	.wc-block-cart-item__wrap .wc-block-components-product-details,
	.wc-block-cart-item__wrap .wc-block-components-product-details__value {
		color: var( --wp--preset--color--text-soft );
		font-size: 13px;
		line-height: 16px;
	}

	/* 13px ARIAL, because nothing ever gave this input a family - the browser's
	   default face, in the middle of the counter. cart.css sizes it from
	   `.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input`
	   at (0,2,1), so the element selector has to be here too. */
	.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
		font-family: var( --wp--preset--font-family--body );
		font-size: 14px;
		font-weight: 600;
	}

	/* A HAIRLINE BETWEEN ITEMS, which is the difference between a list and three
	   things that happen to be above one another. WooCommerce draws one at its
	   own 699 container breakpoint and ours is 782, so between 700 and 782 there
	   was none at all - and on a phone its rule is scoped to a table that is
	   `:not(:last-child)`, which is the wrong test for the last ROW. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row + .wc-block-cart-items__row {
		border-top: 1px solid var( --wp--preset--color--line );
	}
}

/* 88 + 16 + a 148px stepper needs 252px of row and the line total needs its own
   end; at 360 the content column is 320 and it still holds, so only the gap
   gives. The stepper does not shrink - see the note above. */
@media ( max-width: 480px ) {
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		column-gap: 12px;
	}
}

/* ======================================================================
   THE PRODUCT PAGE, THE TABS, AND TWO CARDS - 2026-09-01
   ====================================================================== */

@media ( max-width: 782px ) {

	/* --- The buy row ----------------------------------------------------
	   "fix up the individual product pages cause its all pushed to the left as
	   well. Needs more centring or filling in."

	   Measured: the stepper is 148px at x=20 in a 350px form, so 202px of the
	   row - 58% of it - was empty, and the add-to-cart button then took the full
	   width on its own line underneath. The one control that does not fill sits
	   above the one that does.

	   Stepper and button on ONE line, which is what a phone product page does
	   everywhere: the quantity keeps the 148px it needs for three 44px targets
	   and the button takes the rest. The caption spans both, because "Kiekis"
	   labels the stepper and not the button. */
	/* `:not(.variations_form)` is not decoration - the rule this has to beat is
	   `.vyt-product__form form.cart:not(.variations_form)` at (0,3,1), because a
	   `:not()` takes the specificity of what is inside it. Without it the form
	   stayed `display: flex`, the two tracks below were computed and ignored,
	   and the button went back to its own line looking exactly as before. */
	.vyt-product__form form.cart:not( .variations_form ) {
		display: grid;
		grid-template-columns: 148px minmax( 0, 1fr );
		column-gap: 12px;
		row-gap: 8px;
		align-items: center;
	}

	.vyt-product__form .vyt-qty__caption {
		grid-column: 1 / -1;
	}

	.vyt-product__form .quantity {
		grid-column: 1;
		margin: 0;
	}

	.vyt-product__form .single_add_to_cart_button {
		grid-column: 2;
		width: 100%;
		margin: 0;
	}

	/* --- The product tabs -----------------------------------------------

	   Five tabs whose natural widths total 300px, with a 32px gap between them
	   and 48px of padding on each side of the strip - 460px of strip in a 350px
	   column, so "Maistinė vertė" was cut off at the screen's edge. A tab you
	   cannot see is a panel nobody opens.

	   Same treatment as the shop's category pills, which is the point: two
	   places on this site lay a row of labels across the width, and they should
	   not solve it differently. Gap 8, no side padding, and each tab takes a
	   share of the slack - all five fit one line at 390 with 18px to give away,
	   and at 360 they wrap and both lines still fill. Nothing is ever clipped
	   and nothing is a fixed width. */
	.vyt-ptabs__strip {
		flex-wrap: wrap;
		gap: 8px;
		padding-inline: 0;
	}

	.vyt-ptabs__tab {
		flex: 1 1 auto;
		white-space: nowrap;
	}

	/* --- The promise heading --------------------------------------------
	   "Dont know exactly but I feel like this heading could look better on the
	   pristatymas ir apmokejimas pages?"

	   It is the only left-aligned thing in its own card: the four promises
	   underneath it are a two-column grid of CENTRED items, and the photograph
	   above it is inset evenly. A left-set heading over centred content reads as
	   though it belongs to something else - which is, near enough, what he is
	   describing when he cannot name the fault. */
	.vyt-promise__title {
		text-align: center;
	}

	/* AND THE FOUR PROMISES UNDER IT DID NOT LINE UP. Two columns, and the first
	   item's title wraps to two lines while the second's does not - so their
	   body copy started 16px apart and every row of the grid stepped. Measured:
	   titles 32px and 16px tall, bodies at y=2144.9 and y=2128.9.

	   A floor of two lines on the title, so the copy under it starts at the same
	   height whatever the label's length - which is the whole point of laying
	   four of anything out in a grid. */
	.vyt-promise__list li strong,
	.vyt-promise__list li > :nth-child( 2 ) {
		display: block;
		min-height: 32px;
	}

	/* --- The contact cards ----------------------------------------------
	   "do the same solution to Kontaktai number and mail sections as we did to
	   the payment cards? Cause the first 2 are really tall and lots of empty
	   space while the other 2 need that space."

	   These already size to their content - 230, 230, 242, 258 - so there is no
	   min-height to take out. What makes the first two read as padded is the
	   rhythm inside them: 24px under the icon and 12px over the note is generous
	   for a card holding two lines and invisible in one holding five.

	   16 and 8. It is the same idea as the payment fix - stop a card being
	   taller than what is in it - applied to the only lever this one has. */
	.vyt-contact-card h2 {
		margin-top: 16px;
	}

	.vyt-contact-card__hours,
	.vyt-contact-card__note,
	.vyt-contact-card > :last-child {
		margin-top: 8px;
	}
}

/* ======================================================================
   THE CART AND CHECKOUT LISTS ON DESKTOP - 2026-09-01
   ======================================================================

   Matas: "Can you make the checkout and cart listed products on desktop look
   good as well using just the same logic? Cause on desktop the images are all
   different dimensions and not fixed squares and the name, cost and other info
   dont fit inside of the height and its all just not positioned well like it is
   on the mobile now? And on the cart the bin icon is on the left."

   Every one of those is measurable and all four were true. At 1440, before:

     cart   image CELL 80x133 holding a 64x64 picture - so the photograph sat
            21px below the cell's top and 47px above its bottom, floating
     cart   name 13px LORA against a 13px total, the same too-small serif the
            phone had until this morning
     cart   counter 107x27 - a third narrower and a third shorter than the
            148x40 the phone and the product page share
     cart   bin at x=263 in a row that ends at x=818, so 555px of the row sat
            empty to the right of the most destructive control on it
     cart   rows 117, 133, 133 - the variation line again
     summary image 64x48 INSIDE A 64x64 BOX. Not a square, and the one thing he
            has now asked for three times
     summary name 14px Lora, total 12px Inter - the price of the line smaller
            than everything around it

   THE SAME ARITHMETIC AS THE PHONE, because "the same logic" is the ask:

       name              16/20   20
                          +       4
       unit price + variation    16
                          +       8
       counter                   40
                              =  88   = the thumbnail

   THE TABLE STAYS A TABLE. This row is a real <table> with a visible <thead> -
   "Produktas | Informacija | Iš viso" - so turning the row into a grid the way
   the phone does would leave those three headings pointing at nothing. The
   layout happens INSIDE the product cell instead, which is 574px wide and was
   using about 190 of them. */

@media ( min-width: 783px ) {

	/* --- The cart's thumbnail ------------------------------------------- */

	/* THE PHOTOGRAPH STARTED 20px BELOW ITS OWN CELL. `vertical-align: top`
	   does nothing about padding, and the cell carried 20 at the top - measured,
	   the cell began at y=401 and the picture at y=422 while the copy beside it
	   began at 402. The row's air belongs to the ROW, not to one cell inside it. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		width: 104px;
		padding: 16px 16px 16px 0;
		vertical-align: top;
	}

	.wc-block-cart-item__image img,
	table.wc-block-cart-items .wc-block-cart-item__image img {
		width: 88px;
		height: 88px;
		min-width: 88px;
		max-width: 88px;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	/* THE ROW'S AIR IS 16px AND IT IS WRITTEN ON EACH CELL, not on `> td`. A
	   <tr> cannot carry padding, and a `... .wc-block-cart-items__row > td` rule
	   at (0,3,1) loses to the three per-cell rules below it at (0,4,1) - it was
	   in the file doing nothing and the rows stayed 89px, touching. The three
	   cells state the same value instead. */

	/* A hairline between items, as on the phone. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row + .wc-block-cart-items__row > td {
		border-top: 1px solid var( --wp--preset--color--line );
	}

	/* --- The product cell becomes the row -------------------------------

	   Four columns for the same reason as the phone: the unit price and the
	   variation are one line of grey facts, not two, and that is the 18px that
	   lets the whole cell finish level with the photograph. The bin takes the
	   far column, which is where it is on the phone and 555px from where it was
	   here. */
	/* THE GRID GOES ON THE WRAP, NOT ON THE CELL. `display: grid` on a <td>
	   takes it out of the table's column model - the browser then wraps it in an
	   anonymous cell, the three columns recompute, and the total dropped to a
	   550px-wide box on a second line underneath. Measured, not predicted: it
	   read L168 R718 where it had been L718 R818. The cell stays a table-cell
	   and the div inside it does the work. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		vertical-align: top;
		padding: 16px 0;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
		display: contents;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap {
		display: grid;
		grid-template-columns: auto minmax( 0, 1fr ) auto;
		grid-template-rows: auto auto auto;
		column-gap: 8px;
		row-gap: 0;
		align-items: start;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
		grid-column: 1 / 3;
		grid-row: 1;
		margin: 0;
		font-family: var( --wp--preset--font-family--body );
		font-size: 16px;
		font-weight: 600;
		line-height: 20px;
		letter-spacing: 0;
	}

	.wc-block-cart-item__prices {
		grid-column: 1;
		grid-row: 2;
		margin-top: 4px;
	}

	.wc-block-cart-item__wrap .wc-block-components-product-metadata {
		grid-column: 2;
		grid-row: 2;
		align-self: baseline;
		margin-top: 4px;
	}

	.wc-block-cart-item__prices,
	.wc-block-cart-item__prices .wc-block-components-product-price,
	.wc-block-cart-item__wrap .wc-block-components-product-metadata,
	.wc-block-cart-item__wrap .wc-block-components-product-metadata li,
	.wc-block-cart-item__wrap .wc-block-components-product-details,
	.wc-block-cart-item__wrap .wc-block-components-product-details__value {
		color: var( --wp--preset--color--text-soft );
		font-size: 13px;
		line-height: 16px;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector {
		grid-column: 1 / 3;
		grid-row: 3;
		justify-self: start;
		box-sizing: border-box;
		width: 148px;
		min-height: 40px;
		border-radius: 20px;
		margin-top: 8px;
		overflow: hidden;
	}

	.wc-block-components-quantity-selector__button {
		min-width: 40px;
		width: 40px;
		min-height: 38px;
	}

	.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
		font-family: var( --wp--preset--font-family--body );
		font-size: 14px;
		font-weight: 600;
		min-height: 38px;
	}

	/* x=263 in a row ending at 818. The far column of the product cell puts it
	   where the phone has it - on the right, level with the counter. */
	/* AND IT GOES TO THE ROW'S EDGE, NOT THE CELL'S. Placed in the product
	   cell's far column it landed at x=655 while the row ends at 818 - better
	   than the 263 it started at, and still 163px short of where the phone puts
	   it. The total owns its own <td>, so the only way into that column is to
	   take the bin out of flow: the row is the containing block and the bin sits
	   bottom-right of it, with the total top-right. That is the phone's
	   arrangement at 1440. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		position: relative;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link {
		position: absolute;
		right: 0;
		bottom: 16px;
		margin: 0;
		padding: 0;
		color: var( --wp--preset--color--text-soft );
	}

	/* Level with the name, the way it is on the phone. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		vertical-align: top;
		padding: 16px 0;
	}

	.wc-block-cart-item__total .wc-block-components-product-price {
		color: var( --wp--preset--color--ink );
		font-size: 16px;
		font-weight: 700;
		line-height: 20px;
	}

	/* --- The checkout's summary ------------------------------------------

	   A 64x48 picture inside a 64x64 box: the wrapper was square and the picture
	   was not, which is the "images are all different dimensions and not fixed
	   squares" exactly. The height comes from the file unless something states
	   it, and `height: 100%` on the <img> loses to the theme's own
	   `img { height: auto }` here. Stated. */
	.wc-block-components-order-summary .wc-block-components-order-summary-item__image,
	.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
		width: 64px;
		min-width: 64px;
		height: 64px;
	}

	.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	/* TOP, NOT CENTRE. Matas: "make these not float in the middle but land on
	   either the top or the bottom... Like similar to how the cart is made."
	   Centring was put here to close the dead space under a two-line block
	   beside a taller picture, and it bought that at the cost of the one thing
	   the cart row gets right - a shared top edge. The name, the variation and
	   the price now start level with the photograph, exactly as they do in the
	   cart; the picture is simply taller than they are, and space under a
	   photograph reads as the row's own air rather than as a misalignment. */
	.wc-block-components-order-summary .wc-block-components-order-summary-item {
		align-items: flex-start;
	}

	.wc-block-components-order-summary .wc-block-components-product-name {
		font-family: var( --wp--preset--font-family--body );
		font-size: 16px;
		font-weight: 600;
		line-height: 20px;
		letter-spacing: 0;
	}

	/* The price carries its OWN `align-self: center`, so top-aligning the row
	   left it behind - measured at T451 against a row and a name both starting
	   at T429. It lands on the name's line now, which is where the cart puts it. */
	.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
		align-self: flex-start;
	}

	.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price,
	.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price .wc-block-components-product-price {
		font-size: 16px;
		font-weight: 700;
		line-height: 20px;
	}

	.wc-block-components-order-summary .wc-block-components-product-metadata,
	.wc-block-components-order-summary .wc-block-components-product-details,
	.wc-block-components-order-summary .wc-block-components-product-details__value {
		color: var( --wp--preset--color--text-soft );
		font-size: 13px;
		line-height: 16px;
	}

	/* THE NAME SHRINK-WRAPPED INSIDE ITS OWN COLUMN. `.__description` is a flex
	   COLUMN, so its children size to their content rather than to the box - the
	   name measured 125px inside a 179px description and wrapped while 54px sat
	   empty beside it. `align-self: stretch` is what a flex column needs; `width:
	   100%` and `flex: 1` both did nothing here, which is why they are not in
	   this rule. */
	.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
		flex: 1 1 auto;
		padding-right: 0;
	}

	/* `max-width: max-content` WAS THE CAP, and it is why every other lever
	   failed. The name reported 125px inside a 179px description with
	   `width: 100%`, `flex: 1` and `align-self: stretch` all applied and all
	   ignored - a max-width beats every one of them. 125 is the one-line width
	   this string had at the 13px Lora it used to be set in; at 16px Inter it
	   needs about 140, so the box kept the old measurement and the words wrapped
	   inside it. Two rounds of "make the container wider" could never have
	   worked, and both were spent before this was measured. */
	.wc-block-components-order-summary .wc-block-components-product-name {
		align-self: stretch;
		max-width: none;
		/* `padding-top: 12px`, AND THAT IS WHY THE NAME STILL LOOKED CENTRED.
		   The box was on the top edge - measured T429, level with the picture and
		   the price - and the GLYPHS were at 441, because the 12px sits above the
		   text. The previous pass zeroed `padding-bottom`, which is the side that
		   was already 0, and measured element boxes rather than text rectangles,
		   so every number said the row was aligned while the screen said it was
		   not. Measuring a Range over the text node is what found it. */
		padding-top: 0;
		padding-bottom: 0;
	}

}

/* ==========================================================================
   THE DELIVERY RULES' OWN UI - 2026-09-02

   Everything below is for elements that did not exist when the mobile and
   desktop passes ran: the shipping option, the discount line, WooCommerce's
   notice banner and the shop's own cart note. They were rendering entirely as
   the plugin draws them, inside a theme where everything around them is styled.

   Nothing here invents a design. Each rule takes a value the theme already
   uses - the 12px card radius, the line-warm border, the 13px phone floor -
   so these read as part of the same page rather than as a fifth opinion.
   ========================================================================== */

/*
   THE DISCOUNT IS THE BEST NUMBER ON THE PAGE FOR THE CUSTOMER and it was
   rendering identically to "Tarpinė suma" - same grey, same weight. It is the
   one row worth finding at a glance, so the label and the amount both take the
   brand colour. The amount keeps 500 like every other value; the colour does
   the work, not a weight bump that would compete with "Iš viso".
*/
.wc-block-components-totals-fees .wc-block-components-totals-item__label,
.wc-block-components-totals-fees .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--brand);
}

/*
   The shipping row's label is the method name - "Pristatymas kurjeriu" - and it
   is a value the customer chose, not a heading, so it stays with the other
   labels. Only stated here because WooCommerce ships it a shade darker than
   the siblings it sits between.
*/
.wc-block-components-totals-shipping .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--text-muted);
}

/*
   The chosen delivery method on the checkout. WooCommerce draws a 4px radius
   and its own grey; the theme's cards are 12px on line-warm.
*/
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-radius: 12px;
}

.wc-block-components-radio-control-accordion-option {
	border: 1px solid var(--wp--preset--color--line-warm);
}

/*
   WooCommerce'S NOTICE BANNER carries the 4 kg minimum and the Kuršių Nerija
   refusal, so it is the most consequential message on the site - it is the
   reason an order will not go through. The plugin renders it at 12.25px, which
   is under the 13px floor this theme set for phone copy, on a 4px radius.
*/
.wc-block-components-notice-banner {
	align-items: flex-start;
	border-radius: 12px;
	font-size: 13px;
	line-height: 20px;
}

.wc-block-components-notice-banner.is-error {
	background: #fdf2f0;
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
}

.wc-block-components-notice-banner.is-error svg {
	fill: var(--wp--preset--color--brand);
}

/*
   THE SHOP'S OWN CART NOTE - the invitation on orders over 50 kg. It is not a
   WooCommerce notice and deliberately so: a notice that blocks would refuse the
   client's largest customer, and a non-error notice cannot reach a block cart
   at all. See inc/cart-rules.php. So it is the shop speaking rather than the
   plugin warning, and it is styled as a quiet card, not as an alert.
*/
.vyt-cart-note {
	background: var(--wp--preset--color--surface-warm);
	border: 1px solid var(--wp--preset--color--line-warm);
	border-radius: 12px;
	color: var(--wp--preset--color--text);
	font-size: 13px;
	line-height: 20px;
	margin: 0 0 24px;
	padding: 12px;
}

/* ==========================================================================
   THE ADDITIVE FOOTNOTE

   Three of the ten products declare E250, and five places on the site claim
   "be konservantų". The client asked for the claim to stay with an
   explanation rather than be reworded, so every one of those five carries an
   asterisk and this line, printed by vytintas_additive_footnote().

   It is deliberately NOT hidden away at 11px. A qualifier small enough to
   miss is the shape that makes a claim misleading rather than qualified, so
   it sits at the site's 13px phone floor and uses the same muted colour as
   every other secondary line - quiet, but the same size as real copy.
   ========================================================================== */

.vyt-footnote {
	color: var(--wp--preset--color--text-soft);
	font-size: 13px;
	line-height: 20px;
	margin: 24px 0 0;
	max-width: 62ch;
}

/* The trust and promise rows are grids, so the note must span them rather
   than become a sixth cell. */
.vyt-trust .vyt-footnote,
.vyt-promise__body .vyt-footnote,
.vyt-story__features .vyt-footnote {
	grid-column: 1 / -1;
}

/* THE ONLY ONE OF THE FOUR THAT SITS ON A DARK BAND, and it was unreadable:
   text-soft (#6b7280) on the home page's #111827 measures 3.67:1, under the
   4.5 floor for body copy. The other three - about, delivery, shop - are on
   light surfaces where the same token measures 4.43 and reads fine.

   This is a qualifier on a "be konservantų" claim, so it is exactly the line
   that must not be hard to read: text-faint measures 6.99:1 there. No token in
   the palette clears 4.5 on BOTH backgrounds, which is why this is targeted at
   the dark context rather than changed globally. */
.vyt-story__features .vyt-footnote {
	color: var(--wp--preset--color--text-faint);
}

/* The "/ kg" after a card's price. Quieter than the number it qualifies, but
   on the same line - it is part of the price, not a caption under it. */
.vyt-card__unit {
	color: var(--wp--preset--color--text-soft);
	font-size: 13px;
	font-weight: 400;
}

/* The "/ kg" WooCommerce's own price markup now carries everywhere, via
   vytintas_price_html_unit(). One class, sized by where it lands. */
.vyt-price__unit {
	color: var(--wp--preset--color--text-soft);
	font-size: 13px;
	font-weight: 400;
}

/* The "/ kg" after the product page's headline price - same role as
   .vyt-card__unit on a card, at the headline's larger size. */
.vyt-product__price .vyt-price__unit,
.vyt-product__price-per {
	color: var(--wp--preset--color--text-soft);
	font-size: 15px;
	font-weight: 400;
}

/* ==========================================================================
   THE PHONE'S BODY COPY IS 15px, NOT 13

   Measured 2026-09-13 rather than argued. Run-of-text (25+ characters) at
   390px on five Lithuanian shops: rimi, maxima and vynoteka 15-16px, barbora
   14-15, senukai 14. The only smaller one was pigu at 11-13, a dense
   marketplace nobody would hold this shop against. vytintas.lt was 13px for
   76% of its body text.

   AND 13 WAS NEVER A DECISION. The design specifies 11 and 12px, which are
   right in a 200px column at 1440 and wrong at 390; 13 was the smallest bump
   that fixed the worst of it during the mobile pass. A floor, not a choice.

   ONLY SENTENCES MOVE. The list below is every element measured at 13px that
   a person actually reads - process steps, FAQ answers, the delivery cards,
   the four "how it works" steps, the per-kilogram notice. What stays at 13 is
   everything that QUALIFIES rather than states: the E250 footnote, the "/ kg"
   after a price, the small note on Apie mus, and the cart's product-detail
   values. Flattening those to 15 would remove the hierarchy rather than fix
   the floor.

   Phone only. Desktop was passed at 1440 the same day and its sizes are the
   design's own.
   ========================================================================== */

@media ( max-width: 782px ) {

	.vyt-process__text,
	.vyt-faq__answer,
	.vyt-delivery-card__text,
	.vyt-bulk__text,
	.vyt-pay__text,
	.vyt-story__feature p,
	.vyt-step p,
	.vyt-about-quality__text p,
	.vyt-about-eco__intro p,
	.vyt-product__notice p,
	.vyt-delivery__main p {
		font-size: 15px;
		line-height: 24px;
	}

	/* Held at 13 on purpose - these qualify a statement, they are not the
	   statement. Listed after the block above so they win regardless of the
	   order the selectors happen to fall in. */
	.vyt-footnote,
	.vyt-about-who__note,
	.vyt-card__unit {
		font-size: 13px;
		line-height: 20px;
	}
}

/* --- Out of stock on a card -------------------------------------------
   A state the design never drew. The add control is dropped (it is
   absolutely positioned, so nothing else moves) and the card says plainly
   that the product is unavailable, in the muted colour the weight line
   already uses. */
.vyt-card__out {
	margin: 4px 0 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 16px;
}

/* --- THE CART AND CHECKOUT END FLUSH AGAINST THE FOOTER ----------------

   Matas, on the gift-wrapping card: "it needs to rise above a bit cause
   right now it has no space under it, its touching the footer."

   MEASURED, AND IT IS NOT THE CARD. Every page on this site ends with a zero
   gap between <main> and the footer - that is the layout, and the footer's own
   48px of padding-top is the breathing room. The pages that look right supply
   a bottom padding on their LAST SECTION as well: /parduotuve/ and the product
   page both give 48px, the text pages 96px. The cart and the checkout gave 0,
   so their content has always ended flush; nobody noticed while the last thing
   on the page was a totals panel with no outline.

   The gift prompt has a visible border, so its bottom edge lands exactly on the
   line where the footer's background starts and reads as touching. The card was
   what made a page-level gap visible, not what caused it - which is why the fix
   is here and not on `.vyt-giftwrap`. Removing the prompt later must not take
   the spacing with it.

   48px rather than a new number: it is what /parduotuve/ and the product page
   already end on. */
.woocommerce-cart #vyt-content,
.woocommerce-checkout #vyt-content {
	padding-bottom: 48px;
}

/* --- The gift wrapping prompt on the cart ------------------------------
   Sits after the cart block, in the same warm card family the shop uses.
   It is an upsell, so it stays quieter than the totals panel beside it:
   no fill, one line of warm border, and the control is a text button
   rather than a second primary action competing with "Apmokėti". */
.vyt-giftwrap {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
	margin: 24px 0 0;
	padding: 16px;
	border: 1px solid var(--wp--preset--color--line-warm);
	border-radius: 8px;
}

.vyt-giftwrap__body {
	flex: 1 1 260px;
}

.vyt-giftwrap__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 24px;
}

.vyt-giftwrap__copy {
	margin: 4px 0 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
}

.vyt-giftwrap__add {
	flex: 0 0 auto;
	padding: 12px 24px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 40px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 20px;
	text-decoration: none;
	transition: background var(--wp--custom--transition), color var(--wp--custom--transition);
}

.vyt-giftwrap__add:hover,
.vyt-giftwrap__add:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-dark);
}

/* The minimum-order line under the per-kilogram note. Same muted family as the
   note's own body copy - it is a fact, not a warning; the cart is where a
   refusal is actually stated. */
.vyt-product__minimum {
	margin: 4px 0 0;
	font-weight: 700;
}

/* --- The newsletter's consent line and result -------------------------
   Not in the design, which draws the email field alone. An explicit,
   unticked opt-in and a privacy link are not optional for a marketing
   list, so they sit UNDER the drawn field and the field keeps its own
   geometry - nothing above this line moved. */
/* WRITTEN AGAINST A DARK FOOTER THAT IS NOT DARK. `on-dark` (#dce5f2) at 0.8
   opacity on the newsletter's actual #f5f5f3 background measures 1.16:1 -
   effectively invisible, and it shipped that way. The band this sits in is
   light; text-muted measures 6.92:1 on it. The opacity is gone too: dimming a
   consent notice is the wrong instinct on the one line that has to be read. */
.vyt-newsletter__consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 12px 0 0;
	color: var(--wp--preset--color--text-muted);
	font-size: 12px;
	line-height: 16px;
}

.vyt-newsletter__consent input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--wp--preset--color--brand);
}

.vyt-newsletter__consent a {
	color: inherit;
	text-decoration: underline;
}

.vyt-newsletter__notice {
	margin: 8px 0 0;
	color: var(--wp--preset--color--text-muted);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
}

/* ==========================================================================
   THE TEXT PAGES - privacy, terms, returns, orders, DUK

   THEY HAD NO TITLE, NO CONTENT COLUMN AND NO SIDE PADDING. On a 390px phone
   the measured content width was 390px: every line of the privacy policy ran
   from one screen edge to the other, and the page opened straight into an
   H2 with nothing saying which page you were on. Beside /apie-mus/ - titled,
   350px wide inside a 390px screen - they read as unfinished, which is
   exactly how Matas read the DUK: "why are the DUK not answered yet?" They
   were answered. They looked like a dump.

   Deliberately plain rather than designed: these are legal and informational
   pages and the design draws none of them. They get the site's column, its
   type scale and its rhythm, and nothing else.
   ========================================================================== */

.vyt-textpage {
	/* ONE MEASURE, IN rem, AND IT HAS TO BE. This was `max-width: 68ch` on every
	   direct child, and `ch` is the width of a "0" IN THE ELEMENT'S OWN FONT -
	   so the same declaration gave the h1 a 1211px cap and the body a 601px one.
	   Both were then auto-centred inside the 1312px column, which is why the
	   heading sat at x=115 and the text it belongs to sat at x=420: two
	   different left edges from one rule that looked uniform.

	   38rem is the 601px the body already had, frozen so the heading cannot
	   drift away from it again. */
	--vyt-measure: 38rem;

	padding-block: 48px 64px;
}

/* FLUSH LEFT, NOT CENTRED. The column's left edge is where every other page on
   this site starts its content (/apie-mus/ puts its group at x=64), and the
   heading is what the reader's eye returns to at the start of every line. */
/* SET THE PLATFORM'S OWN VARIABLE RATHER THAN FIGHT IT.
   `.vyt-shell` is a constrained-layout group, and WordPress centres its children
   at `--wp--style--global--content-size` with `margin-left: auto !important`.
   Overriding that needs !important of our own; setting the variable instead
   makes the layout engine produce the right column itself, and the heading and
   the body land on the same left edge because they are now governed by one
   number instead of two `ch` values. */
.vyt-textpage .vyt-shell {
	--wp--style--global--content-size: var(--vyt-measure);
}

.vyt-textpage .vyt-shell > * {
	max-width: min(100%, var(--vyt-measure));
}

.vyt-textpage__title {
	margin: 0 0 32px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--display-s);
	font-weight: 700;
	line-height: 1.2;
}

.vyt-textpage h2 {
	margin: 40px 0 8px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 28px;
}

.vyt-textpage h2:first-of-type {
	margin-top: 0;
}

.vyt-textpage p {
	margin: 0 0 16px;
	color: var(--wp--preset--color--text);
	line-height: 24px;
}

.vyt-textpage ul,
.vyt-textpage ol {
	margin: 0 0 16px;
	padding-left: 20px;
	color: var(--wp--preset--color--text);
	line-height: 24px;
}

.vyt-textpage li {
	margin-bottom: 4px;
}

.vyt-textpage a {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

@media (min-width: 768px) {
	.vyt-textpage {
		padding-block: 64px 96px;
	}
}

/* ==========================================================================
   CONTRAST - the muted greys were below the readable floor

   Measured on the running site, not eyeballed. Every value below is the
   computed ratio of the element's own colour against its own background:

     2.33  © 2026 VYTINTAS.LT / "Sukurta su meile Lietuvoje"  - every page
     2.56  the product breadcrumb, and "ir kiti Lietuvos bankai"
     2.54  the delivery page's FAQ answers
     4.35  .vyt-trust__copy      } marginal, but 12px body copy under a
     4.42  .vyt-promise__text    } 4.5 floor is still under it
     4.43  the footer tagline, the newsletter blurb, .vyt-footnote on light,
           and the product page's per-kilogram note

   All of them are secondary copy in the site's muted grey family, and all of
   them move to text-muted (#4b5563), which measures 6.9 on the light grounds
   these sit on. The type sizes and weights are untouched - this is a colour
   fix, not a redesign.

   NOT TOUCHED, because it is the brand and not a bug to fix silently: white
   on the brand orange (#f54c2d) measures 3.53, and so does the orange used as
   text on the active product tab. Every primary button on the site is that
   pair. Changing it changes the brand, so it is recorded in LAUNCH-NOTES for
   the designer rather than altered here.
   ========================================================================== */

.vyt-footer__legal,
.vyt-footer__legal span,
.vyt-footer__copyright,
.vyt-footer__made,
.vyt-form__privacy,
.vyt-form__privacy span,
.vyt-wholesale__mail,
.vyt-product__notice p,
.vyt-footer__tagline,
.vyt-footer__newsletter-text,
.vyt-pay__note,
.vyt-faq__answer,
.vyt-trust__copy,
.vyt-promise__text,
.vyt-product__minimum,
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--text-muted);
}

/* The footnote sits on light grounds on four pages and on the home page's dark
   band on one; the dark case is handled above and must keep winning. */
.vyt-footnote {
	color: var(--wp--preset--color--text-muted);
}

.vyt-story__features .vyt-footnote {
	color: var(--wp--preset--color--text-faint);
}

/* The custom select's PLACEHOLDER state, which is the rule that actually wins
   over .vyt-menu__value - measured 2.45:1 on the contact form's field. A
   placeholder is conventionally lighter than a chosen value, and it still has
   to be readable: this is the label telling somebody what the field is for. */
.vyt-menu.is-placeholder .vyt-menu__value {
	color: var(--wp--preset--color--text-muted);
}

/* --- ES paramos puslapis (/es-parama/) ---------------------------------
   A publicity obligation page, not a designed Figma node: there is no
   artboard for it. It therefore borrows the page's existing vocabulary
   rather than inventing one - the 1312px shell, the page-hero's 48px Lora
   title, the quality panel's surface tone and the panel radius - so it reads
   as part of this site and not as a plugin's output.

   Built 2026-10-21 against the same structure as Marių Namai's es-parama
   page, so the agency has one shape for this obligation across clients. */

.vyt-es-head {
	padding-block: 116px 72px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.vyt-es-head__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 399px;
	gap: 80px;
	align-items: start;
}

/* The emblem is a logo, so it is CONTAINED, never cover-cropped like the
   photographic page heroes. Cropping the EU flag is not a styling choice
   that is available to us. */
.vyt-es-head__logo {
	margin: 0;
}

.vyt-es-head__logo img {
	display: block;
	width: 100%;
	max-width: 399px;
	height: auto;
}

.vyt-es__label {
	margin: 0 0 16px;
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.vyt-es__title {
	margin: 0 0 24px;
	max-width: 760px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 44px;
	font-weight: 700;
	line-height: 60px;
	letter-spacing: -1px;
}

.vyt-es__lead {
	margin: 0;
	max-width: 680px;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 29px;
}

.vyt-es-body {
	padding-block: 72px;
}

.vyt-es-body__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 64px;
	align-items: start;
}

.vyt-es__h2 {
	margin: 0 0 24px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 48px;
}

.vyt-es__h3 {
	margin: 40px 0 16px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 32px;
}

.vyt-es__text p {
	margin: 0 0 16px;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--md);
	line-height: 28px;
}

.vyt-es__text p:last-child {
	margin-bottom: 0;
}

/* Same surface and radius as the About page's quality panel, so the two
   read as the same component family. */
.vyt-es__facts {
	padding: 36px 32px;
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--surface);
}

.vyt-es__facts-title {
	margin: 0 0 24px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 32px;
}

.vyt-es__rows {
	margin: 0;
}

.vyt-es__row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-block: 16px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.vyt-es__row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.vyt-es__key {
	margin: 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 21px;
}

.vyt-es__value {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 26px;
}

/* The support sum is the number an auditor is looking for, so it is the one
   row that is allowed to shout. */
.vyt-es__row--accent .vyt-es__value {
	color: var(--wp--preset--color--brand);
	font-size: 26px;
	line-height: 34px;
}

.vyt-es-funding {
	padding-block: 72px;
	background: var(--wp--preset--color--surface);
}

.vyt-es__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 8px;
}

.vyt-es__card {
	padding: 32px 28px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--base);
}

.vyt-es__amount {
	margin: 0 0 4px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 28px;
	font-weight: 700;
	line-height: 38px;
}

.vyt-es__share {
	margin: 0 0 16px;
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 21px;
}

.vyt-es__card-text {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 22px;
}

.vyt-es-note {
	padding-block: 56px 88px;
}

.vyt-es-note .vyt-es__h3 {
	margin-top: 0;
}

.vyt-es__note-text {
	margin: 0;
	max-width: 680px;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 24px;
}

.vyt-es__note-text a {
	color: var(--wp--preset--color--text-muted);
}

@media ( max-width: 782px ) {
	.vyt-es-head {
		padding-block: 48px 40px;
	}

	.vyt-es-head__inner,
	.vyt-es-body__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	/* The emblem leads on a phone: it is the part of this page a visitor
	   recognises before they read a word of it. */
	.vyt-es-head__inner > .wp-block-group {
		order: 2;
	}

	.vyt-es-head__logo {
		order: 1;
	}

	.vyt-es__title {
		font-size: 30px;
		line-height: 42px;
		letter-spacing: -0.5px;
	}

	.vyt-es__lead {
		font-size: var(--wp--preset--font-size--md);
		line-height: 26px;
	}

	.vyt-es-body,
	.vyt-es-funding {
		padding-block: 40px;
	}

	.vyt-es__h2 {
		font-size: 26px;
		line-height: 36px;
	}

	.vyt-es__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.vyt-es__facts {
		padding: 28px 24px;
	}

	.vyt-es-note {
		padding-block: 32px 56px;
	}
}