/*
Theme Name: LAM-PLAST
Theme URI: https://www.lam-plast.cz
Author: LAM-PLAST
Description: Vlastní blokové (FSE) téma pro LAM-PLAST – rychlé, moderní, bez page builderu.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lamplast
*/

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("assets/fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Headings only (see theme.json styles.elements.heading) - geometric,
   architectural companion to Inter's body text. Same variable-weight +
   subset-split approach as Inter above, so it costs the same one request
   per subset actually used on a page. */
@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 500 800;
	font-display: swap;
	src: url("assets/fonts/outfit-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 500 800;
	font-display: swap;
	src: url("assets/fonts/outfit-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- small hand-written layer on top of theme.json for things the editor UI can't express ---- */

/* A single visible keyboard-focus style for the whole theme. Without this the
   only focus indicator is the browser default, which disappears entirely on the
   dark sections and on anything core sets `outline: none` on.
   Deliberately NOT wrapped in :where() — a focus indicator has to win against
   plugin and core rules, and :where() would give it zero specificity. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 3px;
}

.lp-on-dark a:focus-visible,
.lp-on-dark button:focus-visible,
.lp-hero a:focus-visible,
.lp-hero button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible {
	outline-color: #ffa057;
}

:root {
	--lp-section-y: clamp(4.5rem, 7vw, 7.5rem);
	--lp-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--lp-radius: 14px;
	--lp-radius-lg: 22px;
	--lp-shadow-sm: 0 1px 2px rgba(13, 27, 46, 0.06), 0 4px 12px rgba(13, 27, 46, 0.05);
	--lp-shadow-lg: 0 24px 60px -12px rgba(13, 27, 46, 0.22);
	--lp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.site-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
	position: sticky;
	top: 0;
	/* Above the legacy social-icons floater (z-index 9999) so it can never
	   sit on top of the navigation. */
	z-index: 10000;
	background: var(--wp--preset--color--surface);
}

.site-header-inner {
	gap: clamp(1rem, 2.5vw, 2.5rem);
	padding: 0.75rem clamp(1.25rem, 4vw, 2.5rem);
}

.site-header .wp-block-site-logo img {
	height: auto;
	display: block;
}

.site-header .wp-block-navigation {
	flex: 1 1 auto;
}

.site-header .wp-block-navigation a {
	font-weight: 600;
	font-size: 0.9375rem;
}

/* Top-level items read as soft, clickable pills rather than bare text on
   hover. The padding that makes the pill sit comfortably around the label
   is matched by an equal negative margin, so the link's own painted
   background can be bigger than its footprint in the row - the flex layout
   still sees the original, unpadded width. That matters here: this row
   already has 7 items competing with the logo and header actions for width
   down to the existing 1180px breakpoint, and .wp-block-navigation-item is
   also the class the mobile overlay list uses, so anything that changes
   actual layout width (rather than just paint) risks wrapping the desktop
   row or resizing the mobile one. */
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 0.5rem 0.65rem;
	margin-inline: -0.65rem;
	border-radius: 999px;
	transition: background-color 0.18s var(--lp-ease), color 0.18s var(--lp-ease);
}

.site-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.site-header .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary-dark);
}

/* The toggle button carries both the chevron icon and the aria-expanded
   state (it's one element, not the icon's parent), so its own hover/open
   opacity has to be set directly on it rather than through the link above. */
.site-header .wp-block-navigation__submenu-icon {
	opacity: 0.55;
}

.site-header .wp-block-navigation__submenu-icon svg {
	transition: transform 0.22s var(--lp-ease);
}

.site-header .wp-block-navigation__container > .wp-block-navigation-item:hover .wp-block-navigation__submenu-icon,
.site-header .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
	opacity: 0.9;
}

.site-header-actions {
	gap: clamp(0.75rem, 1.5vw, 1.5rem);
	flex: none;
}

/* A plain globe icon, back in the header row next to the CTA - like the flag
   pill before it, but small enough (a 38px icon button) that it doesn't
   compete with the nav for width the way the full flag+text pill did. The
   plugin renders a flag <img> plus the language name as a bare text node
   inside this link; both are hidden here and replaced with a single globe
   icon, so the closed state reads as one clean icon button. Clicking it
   still opens the plugin's own (untouched) flag+name dropdown underneath. */
.site-header-lang {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.site-header-lang .gtranslate_wrapper {
	display: inline-flex;
	align-items: center;
}

/* GTranslate hardcodes Arial on its generated switcher - pull it back to the
   theme's own typeface so it doesn't look like a bolted-on widget. */
.site-header-lang .gt_switcher,
.site-header-lang .gt_switcher a {
	font-family: var(--wp--preset--font-family--inter) !important;
}

/* The dropdown must escape the switcher's own overflow:hidden and float free
   of the header row instead of pushing it taller when opened. */
.site-header-lang .gt_switcher {
	position: relative;
	width: 38px !important;
	overflow: visible !important;
}

.site-header-lang .gt_switcher .gt_selected {
	background: none !important;
}

.site-header-lang .gt_switcher .gt_selected a {
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	font-size: 0 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c4759' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
	transition: background-color 0.2s;
}

.site-header-lang .gt_switcher .gt_selected a:hover {
	background-color: var(--wp--preset--color--surface-alt) !important;
}

.site-header-lang .gt_switcher .gt_selected a img,
.site-header-lang .gt_switcher .gt_selected a:after {
	display: none !important;
}

.site-header-lang .gt_switcher .gt_option {
	position: absolute !important;
	top: calc(100% + 0.5rem) !important;
	right: 0 !important;
	left: auto !important;
	width: 180px !important;
	border-radius: 12px !important;
	box-shadow: var(--lp-shadow-lg);
}

.site-header-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 1rem;
	white-space: nowrap;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.site-header-phone svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--wp--preset--color--primary);
}

.site-header-phone:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.site-header .wp-block-button__link {
	padding: 0.7rem 1.35rem;
	font-size: 0.9375rem;
	white-space: nowrap;
}

/* The phone number is the first thing to give up room on narrow desktops. */
@media (max-width: 1180px) {
	.site-header-phone span {
		display: none;
	}
}

/* Floating dropdown panel. Two-layer shadow (a tight contact shadow plus a
   soft, wide ambient one) reads as a panel actually lifted off the page
   rather than the single flat drop-shadow this replaces. It stays flush
   against the trigger (no gap) on purpose - hover open/close is driven by
   the Interactivity API watching pointer events on the trigger `<li>`, and
   a real visual gap would create a dead zone the cursor can drop through
   between the two, closing the menu before it reaches it. */
.wp-block-navigation__submenu-container {
	border-radius: 16px;
	padding: 0.5rem;
	border: 1px solid rgba(13, 27, 46, 0.06);
	box-shadow: 0 2px 8px rgba(13, 27, 46, 0.05), 0 24px 48px -16px rgba(13, 27, 46, 0.28);
	background: var(--wp--preset--color--surface);
	transform: translateY(-6px);
	transition: opacity 0.18s var(--lp-ease), transform 0.18s var(--lp-ease);
}

@media (hover: hover) {
	.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
		transform: translateY(0);
	}
}

.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__submenu-container {
		transform: none;
	}
}

/* Submenu rows: inset, individually-rounded hover pills instead of a flat
   list, matching the top-level items' language above. */
.wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-radius: 10px;
	transition: background-color 0.18s var(--lp-ease);
}

.wp-block-navigation__submenu-container .wp-block-navigation-item:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within {
	background: var(--wp--preset--color--primary-tint);
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 0.85rem;
	font-size: 0.9rem;
	border-radius: inherit;
	transition: color 0.18s var(--lp-ease);
}

.wp-block-navigation__submenu-container .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary-dark);
}

/* Inside the mobile fullscreen overlay, submenus render inline (always
   expanded, part of the page flow) rather than as floating dropdowns - the
   desktop "card" look above (shadow + border) reads there as disconnected
   white boxes stacked on top of each other instead of one coherent list. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface-alt) !important;
	border: none;
	border-radius: 12px;
	box-shadow: none;
	padding-block: 0.5rem;
}

/* The nav's "justify right" setting (correct on desktop - it pushes the menu
   next to the logo) doubles, inside the vertical mobile overlay, as
   right-aligning every row - so both top-level items and their submenu
   boxes end up pinned to the right edge with a big dead margin on the left,
   instead of reading as a normal top-to-bottom, left-aligned mobile list. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open nav.wp-block-navigation {
	align-items: stretch !important;
	justify-content: flex-start !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container {
	width: 100% !important;
	text-align: left !important;
}

/* ============================================================
   Editorial building blocks
   ============================================================ */

/* Core's flow layout ships `.is-layout-flow > * { margin-block-start: 24px }`,
   which also lands on grid children: every item except the first gets pushed
   down 24px and, because the row still stretches, ends up 24px shorter than
   its neighbours. Any grid of ours that is also a core group has to opt out.
   Prefixed with .wp-block-group so it outranks core's rule on specificity
   rather than relying on stylesheet order. */
.wp-block-group.lp-card-grid > *,
.wp-block-group.lp-tile-grid > *,
.wp-block-group.lp-person-grid > *,
.wp-block-group.lp-construction > *,
.wp-block-group.lp-contact-split > *,
.wp-block-group.lp-product-split > *,
.wp-block-group.lp-link-columns > *,
.wp-block-group.lp-section-head > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Section rhythm. The inline padding is declared with !important because core
   injects its own padding on any group carrying a background colour, which
   would otherwise make the tinted sections narrower than the plain ones. */
.lp-section {
	padding-top: var(--lp-section-y);
	padding-bottom: var(--lp-section-y);
	padding-inline: var(--lp-gutter) !important;
}

.lp-stats-band {
	padding-block: clamp(2.5rem, 4vw, 4rem);
	padding-inline: var(--lp-gutter);
}

/* Eyebrow / kicker label above section headings */
.lp-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 1.1rem;
}

.lp-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
	flex: none;
}

.lp-on-dark .lp-eyebrow {
	color: #ffa057;
}

/* Asymmetric section header: heading left, intro right */
.lp-section-head {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
}

.lp-section-head > h2 {
	margin: 0;
	max-width: 16ch;
}

.lp-section-head .lp-section-intro {
	margin: 0;
	color: var(--wp--preset--color--body-text);
	font-size: 1.0625rem;
	line-height: 1.7;
	padding-bottom: 0.35rem;
}

.lp-on-dark .lp-section-head .lp-section-intro {
	color: rgba(255, 255, 255, 0.72);
}

/* ============================================================
   Hero
   ============================================================ */

.lp-hero {
	position: relative;
	isolation: isolate;
}

/* The hero uses the pre-cropped wide variant, so it needs no repositioning. */
.lp-hero .wp-block-cover__image-background {
	object-position: center;
}

/* The overlay gradient already carries its own alpha per stop, so core's
   default 0.5 dim would halve it and leave the headline low-contrast. */
.lp-hero .wp-block-cover__background {
	opacity: 1;
}

.lp-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.lp-hero h1 {
	color: #fff;
	margin: 0 0 1.35rem;
	max-width: 15ch;
	text-wrap: balance;
}

.lp-hero .lp-hero-lead {
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
	line-height: 1.62;
	max-width: 48ch;
	margin: 0 0 2.25rem;
}

.lp-hero .lp-eyebrow {
	color: #ff8a3d;
}

.lp-hero .wp-block-buttons {
	gap: 0.85rem;
}

/* Trust strip pinned to the bottom of the hero */
.lp-hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(1.25rem, 3vw, 2.75rem);
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	list-style: none;
}

.lp-hero-trust li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.9375rem;
	font-weight: 500;
	padding: 0.35rem 0;
}

.lp-hero-trust svg {
	width: 17px;
	height: 17px;
	flex: none;
	color: #7fb0ff;
}

/* ============================================================
   Stat band
   ============================================================ */

.lp-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	border-block: 1px solid var(--wp--preset--color--border);
}

.lp-stats > div {
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem);
	border-left: 1px solid var(--wp--preset--color--border);
}

.lp-stats > div:first-child {
	border-left: 0;
	padding-left: 0;
}

.lp-stat-number {
	display: block;
	font-weight: 800;
	font-size: clamp(2.1rem, 1.6rem + 1.8vw, 3.1rem);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--primary);
	font-variant-numeric: tabular-nums;
	margin-bottom: 0.5rem;
}

.lp-stat-label {
	display: block;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--wp--preset--color--body-text);
}

/* ============================================================
   Product / range cards
   ============================================================ */

.lp-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 1.6vw, 1.5rem);
}

.lp-product-card {
	position: relative;
	/* The heading link is stretched over the whole card (see ::after below),
	   so the card needs to advertise itself as clickable. */
	cursor: pointer;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lp-radius);
	overflow: hidden;
	transition: transform 0.28s var(--lp-ease), box-shadow 0.28s var(--lp-ease),
		border-color 0.28s var(--lp-ease);
}

.lp-product-card:hover,
.lp-product-card:focus-within {
	transform: translateY(-5px);
	box-shadow: var(--lp-shadow-lg);
	border-color: rgba(30, 86, 201, 0.35);
}

/* Ring the whole card rather than just the heading text, since the whole card
   is the click target. */
.lp-product-card:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.lp-product-card a:focus-visible {
	outline: none;
}

/* Product renders ship on a white background at 161x128, so the showcase stays
   white (no visible image box) and never upscales them past native size. */
.lp-product-media {
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	background: #fff;
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 1.5rem;
	overflow: hidden;
}

.lp-product-media img {
	width: auto;
	height: auto;
	max-width: min(70%, 161px);
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.4s var(--lp-ease);
}

.lp-product-card:hover .lp-product-media img,
.lp-product-card:focus-within .lp-product-media img {
	transform: scale(1.06);
}

.lp-product-body {
	padding: 1.5rem 1.5rem 1.65rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.lp-product-body h3 {
	margin: 0 0 0.55rem;
	font-size: 1.1875rem;
}

.lp-product-body h3 a {
	color: inherit;
	text-decoration: none;
}

/* Whole card clickable, but the link text stays the accessible name */
.lp-product-body h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lp-product-body p {
	margin: 0;
	font-size: 0.9688rem;
	line-height: 1.6;
	color: var(--wp--preset--color--body-text);
}

.lp-product-more {
	margin-top: 1.1rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.lp-product-card:hover .lp-product-more {
	gap: 0.65rem;
}

.lp-product-more span {
	transition: transform 0.28s var(--lp-ease);
}

/* ============================================================
   Blog archive - same card language as the product grid above,
   templates/archive.html (query loop renders a <ul>/<li>, so the grid
   and list-reset live on the block's own default class).
   ============================================================ */

.lp-blog-query {
	margin-top: 2.75rem;
}

.wp-block-post-template.lp-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 1.6vw, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.lp-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lp-radius);
	overflow: hidden;
	transition: transform 0.28s var(--lp-ease), box-shadow 0.28s var(--lp-ease),
		border-color 0.28s var(--lp-ease);
}

.lp-post-card:hover,
.lp-post-card:focus-within {
	transform: translateY(-5px);
	box-shadow: var(--lp-shadow-lg);
	border-color: rgba(30, 86, 201, 0.35);
}

.lp-post-media {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.lp-post-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--lp-ease);
}

.lp-post-card:hover .lp-post-media img,
.lp-post-card:focus-within .lp-post-media img {
	transform: scale(1.06);
}

.lp-post-body {
	padding: 1.35rem 1.5rem 1.6rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.lp-post-date {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--primary);
}

.lp-post-card h3 {
	margin: 0 0 0.6rem;
	font-size: 1.1875rem;
}

.lp-post-card h3 a {
	color: inherit;
	text-decoration: none;
}

.lp-post-card h3 a:hover {
	color: var(--wp--preset--color--primary);
}

.lp-post-excerpt {
	margin: 0;
	font-size: 0.9688rem;
	line-height: 1.6;
	color: var(--wp--preset--color--body-text);
	/* Keep excerpt lengths (and so card heights) consistent across a row. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lp-post-more {
	margin-top: 1.1rem;
	padding-top: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.lp-post-more::after {
	content: "\2192";
	transition: transform 0.28s var(--lp-ease);
}

.lp-post-card:hover .lp-post-more {
	gap: 0.65rem;
}

.wp-block-query-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 3rem;
	font-size: 0.9375rem;
}

.wp-block-query-pagination a,
.wp-block-query-pagination-numbers > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.6rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
	transition: border-color 0.18s var(--lp-ease), color 0.18s var(--lp-ease), background-color 0.18s var(--lp-ease);
}

.wp-block-query-pagination a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.wp-block-query-pagination-numbers .current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 600;
}

/* ============================================================
   Technical / anatomy section
   ============================================================ */

.lp-tech-figure {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lp-radius-lg);
	padding: clamp(1.5rem, 4vw, 3.25rem);
	box-shadow: var(--lp-shadow-sm);
	margin: 0;
}

.lp-tech-figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* A single modest product photo where the only real photography available
   is low-resolution (e.g. motory.jpg is 300x247) - capped at native size and
   centered, instead of the full-bleed .lp-tech-figure treatment stretching
   it past what the source can support. */
.lp-photo-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lp-radius-lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: var(--lp-shadow-sm);
	margin: 0;
}

.lp-photo-card img {
	display: block;
	width: 100%;
	max-width: 300px;
	height: auto;
	border-radius: var(--lp-radius);
}

.lp-photo-card figcaption {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--body-text);
	text-align: center;
}

.lp-tech-parts {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 2rem);
	margin-top: clamp(2rem, 3.5vw, 3rem);
	list-style: none;
	padding: 0;
}

.lp-tech-parts li {
	border-top: 2px solid var(--wp--preset--color--primary);
	padding-top: 1rem;
}

.lp-tech-parts .lp-part-num {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.4rem;
}

.lp-tech-parts strong {
	display: block;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	margin-bottom: 0.3rem;
}

.lp-tech-parts span:last-child {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--wp--preset--color--body-text);
}

/* ============================================================
   Dark inverted band ("Proč LAM-PLAST")
   ============================================================ */

.lp-on-dark {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(90rem 40rem at 15% -10%, rgba(30, 86, 201, 0.55) 0%, transparent 62%),
		linear-gradient(135deg, #0b1728 0%, var(--wp--preset--color--ink) 55%, #10294f 100%);
	color: rgba(255, 255, 255, 0.78);
}

.lp-on-dark h2,
.lp-on-dark h3 {
	color: #fff;
}

.lp-benefits {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.75rem, 3.5vw, 3.25rem) clamp(1.75rem, 3.5vw, 3.5rem);
}

.lp-benefit {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: 1.5rem;
}

.lp-benefit .lp-icon {
	width: 30px;
	height: 30px;
	color: #7fb0ff;
	margin-bottom: 1.1rem;
	display: block;
}

.lp-benefit .lp-icon svg {
	width: 100%;
	height: 100%;
}

.lp-benefit h3 {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

.lp-benefit p {
	margin: 0;
	font-size: 0.9688rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.68);
}

/* ============================================================
   Configurator feature card
   ============================================================ */

.lp-feature-card {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: stretch;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lp-radius-lg);
	overflow: hidden;
	box-shadow: var(--lp-shadow-lg);
}

.lp-feature-card .lp-feature-body {
	padding: clamp(2rem, 4vw, 3.75rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.lp-feature-card h2 {
	margin: 0 0 1rem;
	max-width: 18ch;
}

.lp-feature-card p {
	margin: 0 0 2rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	max-width: 46ch;
}

.lp-feature-media {
	position: relative;
	min-height: 320px;
	background: var(--wp--preset--color--primary-tint);
}

.lp-feature-media img,
.lp-feature-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lp-video-frame .lp-video-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 4.5rem;
	height: 4.5rem;
	border: none;
	border-radius: 50%;
	background: rgba(9, 20, 36, 0.72);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s var(--lp-ease), transform 0.2s var(--lp-ease);
}

.lp-video-frame .lp-video-play svg {
	width: 1.75rem;
	height: 1.75rem;
	margin-left: 0.2rem;
}

.lp-video-frame .lp-video-play:hover {
	background: var(--wp--preset--color--accent);
	transform: scale(1.06);
}

.lp-video-frame.is-playing .lp-video-play {
	display: none;
}

/* ============================================================
   Reference gallery
   ============================================================ */

/* The container carries the aspect ratio so the two 1fr rows have a height to
   divide; per-figure aspect-ratio can't size a row the spanning item shares. */
.lp-ref-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	aspect-ratio: 16 / 7;
	gap: clamp(0.75rem, 1.2vw, 1.15rem);
}

.lp-ref-grid figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--lp-radius);
	background: var(--wp--preset--color--surface-alt);
	min-height: 0;
}

.lp-ref-grid figure:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.lp-ref-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.55s var(--lp-ease);
}

.lp-ref-grid figure:hover img {
	transform: scale(1.05);
}

/* ============================================================
   CTA band — simple closing call-to-action for content pages
   (category hubs, product detail, info pages). The homepage uses the
   bigger lp-feature-card pattern instead, but this lighter one is
   reused across the ~29 pages still to migrate.
   ============================================================ */

/* Was a flat accent-orange fill - fails WCAG AA for the white text on top
   (2.87:1) and, now that the nav/footer carry a layered navy gradient, was
   the one dark block on the site with no depth to it. Same gradient family
   as .lp-on-dark/.site-footer instead: on ink, white text clears 17:1 and
   the button (unchanged: white bg, ink text) still pops the same way. */
.cta-band {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(42rem 22rem at 12% -15%, rgba(30, 86, 201, 0.5) 0%, transparent 62%),
		linear-gradient(135deg, #0b1728 0%, var(--wp--preset--color--ink) 55%, #10294f 100%);
	color: rgba(255, 255, 255, 0.85);
	border-radius: var(--lp-radius-lg);
}

.cta-band h2 {
	color: #fff;
}

.cta-band p {
	color: rgba(255, 255, 255, 0.78);
}

.cta-band .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--ink);
}

.cta-band .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface-alt);
}

/* ============================================================
   Reference gallery — a core/gallery block, themed rather than re-laid-out.
   Core blocks are used here (instead of hand-written <img>) so WordPress adds
   srcset/sizes and the native lightbox, and so the client can add photos from
   the editor.

   The column layout is deliberately left to core's own flex sizing (driven by
   the block's `columns` attribute). An earlier attempt to replace it with CSS
   Grid collapsed every tile to ~89px: the figure would not stretch to its grid
   cell, so it shrink-to-fit its image while the image was sized from the
   figure, and the browser resolved that circular dependency against a tiny
   srcset candidate. Working with core's layout avoids the whole problem.
   ============================================================ */

.lp-gallery.wp-block-gallery {
	gap: clamp(0.75rem, 1.2vw, 1.15rem);
}

.lp-gallery.wp-block-gallery figure.wp-block-image {
	border-radius: var(--lp-radius);
	overflow: hidden;
	background: var(--wp--preset--color--surface-alt);
}

/* Core lets items grow to fill the last row, so a row with two photos left
   over rendered them at double size. Keep every tile on the column width. */
.lp-gallery.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
}

/* Uniform tiles: every photo is cropped to the same ratio, whether the original
   is landscape or portrait. */
.lp-gallery.wp-block-gallery figure.wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.55s var(--lp-ease);
}

.lp-gallery.wp-block-gallery figure.wp-block-image:hover img {
	transform: scale(1.05);
}

.lp-gallery.wp-block-gallery figure.wp-block-image figcaption {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.lp-gallery.wp-block-gallery figure.wp-block-image img,
	.lp-gallery.wp-block-gallery figure.wp-block-image:hover img {
		transition: none;
		transform: none;
	}
}

/* The gallery thumbnails are force-cropped to 4:3 above so the grid stays
   uniform. For a portrait photo, WordPress's native lightbox zoom (theme.json
   core/image lightbox) sometimes gets stuck carrying that crop's inline
   `object-fit: cover` into the enlarged view, so the full photo never shows.
   Force the enlarged view back to an uncropped, fully-visible photo. */
.wp-lightbox-overlay img {
	object-fit: contain !important;
}

/* ============================================================
   Customer quotes — a single card today, built as a grid so more
   testimonials (e.g. from Google Maps) can be dropped in later without
   any markup changes.
   ============================================================ */

.lp-quote-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.lp-quote {
	background: var(--wp--preset--color--surface-alt);
	border-radius: var(--lp-radius-lg);
	padding: clamp(1.75rem, 3vw, 2.25rem);
	position: relative;
	transition: box-shadow 0.24s var(--lp-ease), transform 0.24s var(--lp-ease);
}

.lp-quote:hover {
	box-shadow: var(--lp-shadow-sm);
	transform: translateY(-3px);
}

/* Was a small, muted accent-orange icon (opacity 0.55) - easy to miss as
   decoration rather than the editorial device a testimonial quote mark is
   meant to be. Bigger and in the site's primary blue instead. */
.lp-quote svg {
	width: 34px;
	height: 34px;
	color: var(--wp--preset--color--primary);
	opacity: 0.85;
	margin-bottom: 1rem;
}

.lp-quote blockquote {
	margin: 0 0 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--wp--preset--color--ink);
}

.lp-quote cite {
	display: block;
	font-style: normal;
}

.lp-quote cite strong {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.lp-quote cite span {
	display: block;
	font-size: 0.85rem;
	color: var(--wp--preset--color--body-text);
	margin-top: 0.1rem;
}

/* Subtle single-line mention used on the homepage. */
.lp-quote-line {
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--wp--preset--color--body-text);
}

.lp-quote-line cite {
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* ============================================================
   Contact + map
   ============================================================ */

.lp-contact-split {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: stretch;
}

/* The Kontakty page's primary split: the form is the actual conversion
   action (every "Nezávazná poptávka" button site-wide lands here), so it
   gets the wider column; the address/phone/map become secondary, compact
   reference material alongside it rather than a second same-weight card. */
.lp-contact-split--form {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	align-items: start;
}

.lp-contact-side {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.lp-contact-card,
.lp-contact-form-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lp-radius-lg);
	padding: clamp(1.75rem, 3vw, 2.75rem);
	box-shadow: var(--lp-shadow-sm);
}

.lp-contact-card h2,
.lp-contact-form-card h2 {
	margin: 0 0 1.5rem;
}

.lp-contact-form-card h2 {
	margin-bottom: 0.5rem;
}

.lp-contact-form-card > .lp-section-intro {
	margin: 0 0 1.75rem;
	max-width: 52ch;
	color: var(--wp--preset--color--body-text);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.lp-contact-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: grid;
	gap: 1.25rem;
}

.lp-contact-list li {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
}

.lp-contact-list svg {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 0.2rem;
	color: var(--wp--preset--color--primary);
}

.lp-contact-list .lp-contact-label {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-text);
	opacity: 0.7;
	margin-bottom: 0.15rem;
}

.lp-contact-list strong {
	font-size: 1.0625rem;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.lp-contact-list a {
	font-size: 1.0625rem;
	font-weight: 600;
}

.lp-map {
	border-radius: var(--lp-radius-lg);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	min-height: 380px;
}

.lp-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 380px;
	border: 0;
}

/* ============================================================
   Contact form (Fluent Forms) - restyled to read as a native part of the
   page rather than the plugin's own default look. Scoped under
   .lp-contact-form-card so it only affects this one embed, not every
   Fluent Forms form that might get added elsewhere later.
   ============================================================ */

.lp-contact-form-card .ff-el-group {
	margin-bottom: 1.35rem;
}

.lp-contact-form-card .ff-el-input--label label {
	display: block;
	margin-bottom: 0.45rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.lp-contact-form-card .ff-el-form-control {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.5;
	transition: border-color 0.18s var(--lp-ease), box-shadow 0.18s var(--lp-ease);
}

.lp-contact-form-card .ff-el-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--preset--color--primary-tint);
}

.lp-contact-form-card textarea.ff-el-form-control {
	resize: vertical;
	min-height: 130px;
}

.lp-contact-form-card .ff-el-help-message {
	margin-top: 0.4rem;
	font-size: 0.83rem;
	color: var(--wp--preset--color--body-text);
	opacity: 0.75;
}

.lp-contact-form-card .ff_submit_btn_wrapper {
	margin-top: 0.5rem;
}

/* Match the button styling every other CTA on the site already uses,
   overriding Fluent Forms' own inline button colors (theme.json's blue,
   not the plugin's default). */
.lp-contact-form-card .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--primary) !important;
	color: #fff !important;
	border: none;
	border-radius: 8px;
	padding: 0.95rem 1.85rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	cursor: pointer;
	transition: background-color 0.18s var(--lp-ease);
}

.lp-contact-form-card .ff-btn-submit:hover {
	background: var(--wp--preset--color--primary-dark) !important;
}

/* Validation errors: Fluent Forms adds these dynamically on submit, so they
   need their own visible styling rather than relying on any plugin default
   that might not have loaded. */
.lp-contact-form-card .error,
.lp-contact-form-card .ff-el-is-error .ff-el-form-control {
	border-color: #b3271e !important;
}

.lp-contact-form-card .error {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.83rem;
	color: #b3271e;
}

/* Success confirmation replaces the form in place (samePageFormBehavior:
   hide_form) - give it the same card rhythm instead of bare text. */
.lp-contact-form-card .ff-message-success {
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--surface-alt);
	border-radius: var(--lp-radius);
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
}

/* ============================================================
   Page header (non-homepage pages: category hubs, product detail,
   simple info pages) — breadcrumb + eyebrow + H1 + short intro.
   ============================================================ */

.lp-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--body-text);
	margin: 0 0 1.5rem;
	list-style: none;
	padding: 0;
}

.lp-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.lp-breadcrumb a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.lp-breadcrumb li:last-child {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.lp-breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-left: 0.5rem;
	color: var(--wp--preset--color--border);
}

/* Runs on every non-homepage page (28 of them) as plain white until now -
   a light echo of the homepage hero's own radial-gradient-over-dark
   treatment, just inverted for a white page: a soft blue wash top-right
   instead of a photo, subtle enough that dark body text stays perfectly
   readable. The wash needs to bleed full-width even though the header's
   own content stays "wide" (1320px) like the rest of the page, so it's a
   pseudo-element sized to 100vw and re-centered - the standard way to give
   a constrained block a full-bleed background without touching the 28
   content files that all reuse this same .lp-page-header markup. */
.lp-page-header {
	position: relative;
	isolation: isolate;
	padding-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-bottom: clamp(2rem, 3vw, 2.5rem);
}

.lp-page-header::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: -1;
	background:
		radial-gradient(46rem 22rem at 86% -25%, rgba(30, 86, 201, 0.12) 0%, transparent 65%),
		linear-gradient(180deg, var(--wp--preset--color--surface-alt) 0%, var(--wp--preset--color--surface) 100%);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.lp-page-header h1 {
	max-width: 22ch;
	margin: 0 0 1rem;
}

.lp-page-header .lp-page-intro {
	max-width: 62ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--wp--preset--color--body-text);
	margin: 0;
}

/* ============================================================
   Category tiles — a lighter sibling of .lp-product-card for hub
   pages: image + title only, no body copy.
   ============================================================ */

.lp-tile-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.85rem, 1.4vw, 1.25rem);
}

.lp-tile {
	position: relative;
	display: block;
	text-decoration: none;
	color: inherit;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lp-radius);
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.24s var(--lp-ease), box-shadow 0.24s var(--lp-ease),
		border-color 0.24s var(--lp-ease);
}

.lp-tile:hover,
.lp-tile:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--lp-shadow-lg);
	border-color: rgba(30, 86, 201, 0.35);
	color: inherit;
	text-decoration: none;
}

.lp-tile-media {
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	background: #fff;
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 1.25rem;
}

.lp-tile-media img {
	width: auto;
	height: auto;
	max-width: min(72%, 150px);
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.4s var(--lp-ease);
}

.lp-tile:hover .lp-tile-media img {
	transform: scale(1.06);
}

.lp-tile-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.9rem 1.1rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.lp-tile-label svg {
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--wp--preset--color--primary);
	transition: transform 0.24s var(--lp-ease);
}

.lp-tile:hover .lp-tile-label svg {
	transform: translateX(3px);
}

/* ============================================================
   Construction blocks (three short "what it's made of" columns) —
   used below the tile grid on category hubs and on product pages.
   ============================================================ */

.lp-construction {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.75rem, 3vw, 3rem);
}

.lp-construction > div {
	border-top: 2px solid var(--wp--preset--color--primary);
	padding-top: 1.25rem;
}

.lp-construction h3 {
	margin: 0 0 0.6rem;
	font-size: 1.0625rem;
}

.lp-construction p {
	margin: 0;
	font-size: 0.9688rem;
	line-height: 1.65;
	color: var(--wp--preset--color--body-text);
}

/* ============================================================
   Key facts — the "at a glance" card at the top of a product page.
   A real <dl>, so the label/value pairing survives without CSS.
   ============================================================ */

.lp-product-split {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: start;
}

.lp-product-split > div > p:first-child {
	margin-top: 0;
}

.lp-keyfacts {
	margin: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lp-radius);
	padding: 1.5rem;
	box-shadow: var(--lp-shadow-sm);
}

.lp-keyfacts > div {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.lp-keyfacts > div:first-child {
	padding-top: 0;
}

.lp-keyfacts > div:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.lp-keyfacts dt {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-text);
	opacity: 0.75;
	margin-bottom: 0.3rem;
}

.lp-keyfacts dd {
	margin: 0;
	font-size: 0.9688rem;
	line-height: 1.55;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* ============================================================
   Material variants — the numbered strip photo beside the list of
   what each number is.
   ============================================================ */

.lp-variant-split {
	display: grid;
	grid-template-columns: 231px minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: start;
}

.lp-variant-figure {
	margin: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lp-radius);
	padding: 0.75rem;
}

.lp-variant-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.lp-variant-figure figcaption {
	margin-top: 0.75rem;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--wp--preset--color--body-text);
	text-align: center;
}

.lp-variant-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.35rem;
}

.lp-variant-list > li {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.lp-variant-num {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary);
	font-size: 0.875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Materials that aren't one of the numbered photos get a neutral marker. */
.lp-variant-num.is-plain {
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--body-text);
}

.lp-variant-list strong {
	display: block;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--ink);
	margin-bottom: 0.25rem;
}

.lp-variant-list p {
	margin: 0;
	font-size: 0.9688rem;
	line-height: 1.6;
	color: var(--wp--preset--color--body-text);
}

/* ============================================================
   Variant photos — a grid of real product photos with a caption each,
   for product variants where (unlike Kopule) there is no single numbered
   composite image to pair with a list.
   ============================================================ */

.lp-variant-photos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.85rem, 1.4vw, 1.25rem);
}

.lp-variant-photos figure {
	margin: 0;
}

.lp-variant-photos .lp-variant-photo-media {
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lp-radius);
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.lp-variant-photos img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lp-variant-photos figcaption {
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--wp--preset--color--body-text);
	text-align: center;
}

/* ============================================================
   Spec tables — real <table> markup for tabular technical data
   (heat transfer coefficients, light transmission, flammability),
   dressed up but still a proper table for accessibility/SEO.
   ============================================================ */

.lp-spec-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lp-radius);
	background: var(--wp--preset--color--surface);
}

.lp-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.lp-spec-table caption {
	text-align: left;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-text);
	padding: 1.1rem 1.25rem 0.75rem;
}

.lp-spec-table th,
.lp-spec-table td {
	text-align: left;
	padding: 0.75rem 1.25rem;
	border-top: 1px solid var(--wp--preset--color--border);
	white-space: nowrap;
}

.lp-spec-table thead th {
	border-top: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--body-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.lp-spec-table td:first-child,
.lp-spec-table th:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.lp-spec-table tbody tr:hover {
	background: var(--wp--preset--color--surface-alt);
}

.lp-spec-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

/* ============================================================
   People — contact cards for the team listing.
   ============================================================ */

.lp-person-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 1.6vw, 1.5rem);
}

.lp-person-card {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lp-radius);
	padding: 1.5rem;
	transition: border-color 0.24s var(--lp-ease), box-shadow 0.24s var(--lp-ease);
}

.lp-person-card:hover {
	border-color: rgba(30, 86, 201, 0.35);
	box-shadow: var(--lp-shadow-sm);
}

.lp-person-head {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.lp-person-initials {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.lp-person-role {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.2rem;
}

.lp-person-name {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}

.lp-person-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 0.9rem;
}

.lp-person-contact li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9375rem;
}

.lp-person-contact svg {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--wp--preset--color--body-text);
	opacity: 0.6;
}

.lp-person-contact a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	word-break: break-word;
}

.lp-person-contact a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* ============================================================
   FAQ — core/details blocks styled as an accordion. Native <details> means
   no JavaScript, working keyboard support, and browser find-in-page that can
   reach collapsed answers.
   ============================================================ */

.lp-faq {
	display: grid;
	gap: 0.65rem;
	max-width: 60rem;
}

.lp-faq .wp-block-details {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lp-radius);
	padding: 0;
	overflow: hidden;
	transition: border-color 0.2s var(--lp-ease), box-shadow 0.2s var(--lp-ease);
}

.lp-faq .wp-block-details[open] {
	border-color: rgba(30, 86, 201, 0.35);
	box-shadow: var(--lp-shadow-sm);
}

/* Deliberately not display:flex — a question containing an inline link would
   turn each text node into a separate flex item, and the row gap would show up
   as stray spaces around the link. */
.lp-faq .wp-block-details > summary {
	position: relative;
	display: block;
	padding: 1.15rem 3.25rem 1.15rem 1.35rem;
	font-size: 1.0313rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	list-style: none;
	transition: background-color 0.18s var(--lp-ease), color 0.18s var(--lp-ease);
}

/* Same hover-surface language as the nav pills and footer links - a tinted
   background on the whole clickable row, not just a text-color change. */
.lp-faq .wp-block-details:not([open]) > summary:hover {
	background: var(--wp--preset--color--primary-tint);
}

.lp-faq .wp-block-details > summary::-webkit-details-marker,
.lp-faq .wp-block-details > summary::marker {
	display: none;
	content: "";
}

/* Chevron drawn with a pseudo-element so the marker can stay hidden. */
.lp-faq .wp-block-details > summary::after {
	content: "";
	position: absolute;
	top: 1.45rem;
	right: 1.5rem;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(45deg);
	transition: transform 0.2s var(--lp-ease);
}

.lp-faq .wp-block-details[open] > summary::after {
	transform: rotate(-135deg);
}

.lp-faq .wp-block-details > summary:hover {
	color: var(--wp--preset--color--primary);
}

.lp-faq .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 1.35rem 1.35rem;
	font-size: 0.9688rem;
	line-height: 1.7;
	color: var(--wp--preset--color--body-text);
	max-width: 62ch;
}

.lp-faq-group + .lp-faq-group {
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.lp-faq-group > h2 {
	margin: 0 0 1.25rem;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
}

/* ============================================================
   Callout — warnings / important notices.
   ============================================================ */

.lp-callout {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: var(--wp--preset--color--surface-alt);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 var(--lp-radius) var(--lp-radius) 0;
	padding: 1.25rem 1.5rem;
}

.lp-callout svg {
	width: 22px;
	height: 22px;
	flex: none;
	margin-top: 0.15rem;
	color: var(--wp--preset--color--accent);
}

.lp-callout strong {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--ink);
}

.lp-callout p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--body-text);
}

/* ============================================================
   Related read — cross-links from a product page to a relevant
   blog article ("Čtěte také"). Same visual language as .lp-callout
   (tinted box, accent-colored icon), but content is a link, not a
   warning, so the icon/border use the primary color to read as
   "more info" rather than "caution".
   ============================================================ */

.lp-related-read {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: var(--wp--preset--color--surface-alt);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 0 var(--lp-radius) var(--lp-radius) 0;
	padding: 1.25rem 1.5rem;
}

.lp-related-read + .lp-related-read {
	margin-top: 1rem;
}

.lp-related-read svg {
	width: 22px;
	height: 22px;
	flex: none;
	margin-top: 0.15rem;
	color: var(--wp--preset--color--primary);
}

.lp-related-read .lp-related-eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.35rem;
}

.lp-related-read a {
	display: block;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	margin-bottom: 0.25rem;
}

.lp-related-read a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.lp-related-read p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--body-text);
}

/* ============================================================
   Link columns — "Příslušenství" / "Dokumenty ke stažení" style
   quick-link lists, distinct from footer-links (larger, with icons).
   ============================================================ */

.lp-link-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
}

.lp-link-columns h3 {
	margin: 0 0 1.1rem;
	font-size: 1rem;
}

.lp-link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.15rem;
}

.lp-link-list a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.65rem 0;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.lp-link-list li:last-child a {
	border-bottom: 0;
}

.lp-link-list a:hover {
	color: var(--wp--preset--color--primary);
}

.lp-link-list svg {
	width: 17px;
	height: 17px;
	flex: none;
	color: var(--wp--preset--color--primary);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1024px) {
	.lp-card-grid,
	.lp-tile-grid,
	.wp-block-post-template.lp-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-benefits,
	.lp-construction,
	.lp-person-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-spec-grid,
	.lp-link-columns,
	.lp-product-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp-variant-photos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-tech-parts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lp-feature-card,
	.lp-contact-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp-feature-media {
		min-height: 260px;
		order: -1;
	}
}

@media (max-width: 781px) {
	.lp-section-head {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 1rem;
	}

	.lp-section-head > h2 {
		max-width: 100%;
	}

	.lp-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-stats > div {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--border);
		padding-left: 0;
	}

	.lp-stats > div:nth-child(-n + 2) {
		border-top: 0;
	}

	.lp-card-grid,
	.lp-tile-grid,
	.lp-benefits,
	.lp-construction,
	.lp-person-grid,
	.wp-block-post-template.lp-post-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp-tech-parts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-variant-split {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
	}

	.lp-variant-figure {
		max-width: 231px;
	}

	.lp-variant-list {
		justify-self: stretch;
	}

	.lp-spec-table {
		font-size: 0.875rem;
	}

	.lp-spec-table th,
	.lp-spec-table td {
		padding: 0.6rem 0.9rem;
	}

	.lp-ref-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: auto;
		aspect-ratio: auto;
	}

	.lp-ref-grid figure {
		aspect-ratio: 4 / 3;
	}

	.lp-ref-grid figure:first-child {
		grid-column: span 2;
		grid-row: auto;
		aspect-ratio: 16 / 10;
	}

	.lp-hero h1,
	.lp-hero .lp-hero-lead {
		max-width: 100%;
	}

	/* The overlay is a left-to-right fade tuned for wide screens; on a phone
	   that hides the photo entirely, so fade top-to-bottom instead. */
	.lp-hero .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			rgba(9, 20, 36, 0.93) 0%,
			rgba(9, 20, 36, 0.82) 55%,
			rgba(9, 20, 36, 0.55) 100%
		) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-product-card,
	.lp-product-media img,
	.lp-ref-grid img,
	.lp-product-more span {
		transition: none;
	}

	.lp-product-card:hover {
		transform: none;
	}

	.lp-product-card:hover .lp-product-media img,
	.lp-ref-grid figure:hover img {
		transform: none;
	}
}

/* footer */
.site-footer {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(70rem 34rem at 88% 0%, rgba(30, 86, 201, 0.35) 0%, transparent 60%),
		linear-gradient(165deg, #0b1728 0%, var(--wp--preset--color--ink) 45%, #0e2038 100%);
	color: rgba(255, 255, 255, 0.72);
	padding: clamp(3.5rem, 6vw, 5rem) var(--lp-gutter) 0;
	font-size: 0.9375rem;
	line-height: 1.7;
}

.site-footer h3 {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	margin-bottom: 1.25rem;
}

/* Same "eyebrow tick" device used ahead of section headings elsewhere on
   the site, so the footer's column labels read as part of the same system
   rather than a generic list of headings. */
.site-footer h3::before {
	content: "";
	width: 20px;
	height: 2px;
	background: var(--wp--preset--color--primary-tint);
	opacity: 0.55;
	flex: none;
}

.footer-cols {
	gap: clamp(1.5rem, 3vw, 3.5rem);
}

/* The brand mark is dark blue, so flatten it to white for the navy footer. */
.site-footer .wp-block-site-logo img {
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

.footer-contact {
	list-style: none;
	padding: 0;
	margin: 1.1rem 0 0;
	display: grid;
	gap: 0.6rem;
}

.footer-contact li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.footer-contact svg {
	width: 16px;
	height: 16px;
	flex: none;
	color: #7fb0ff;
}

.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.3rem;
}

.footer-links li {
	margin: 0;
}

/* Links get the same rounded hover pill as the header nav (padding offset
   by an equal negative margin, so the row spacing itself never moves) -
   one consistent hover language across the whole site instead of a plain
   underline down here. */
.footer-links a {
	display: inline-block;
	padding: 0.3rem 0.55rem;
	margin-inline: -0.55rem;
	border-radius: 8px;
	transition: background-color 0.18s var(--lp-ease), color 0.18s var(--lp-ease);
}

.footer-links a:hover {
	background: rgba(255, 255, 255, 0.08);
}

.site-footer a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
}

.site-footer a:hover {
	color: #fff;
}

.footer-contact a:hover {
	text-decoration: underline;
}

.site-footer .wp-block-navigation a {
	font-size: 0.92rem;
}

.footer-bottom {
	padding-block: 1.5rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.55);
}

.footer-bottom-links {
	gap: 1.5rem;
	align-items: center;
}

.footer-top-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem 0.35rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.72);
	transition: background-color 0.18s var(--lp-ease), border-color 0.18s var(--lp-ease), color 0.18s var(--lp-ease);
}

.footer-top-link svg {
	width: 13px;
	height: 13px;
}

.footer-top-link:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.32);
	color: #fff;
}

@media (max-width: 781px) {
	.card-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ---- CookieYes consent widget - reskinned to the theme's own tokens ----
   The widget ships from a CDN (cdn-cookieyes.com), renders into the light
   DOM (confirmed: no shadow root) with its own default blue (#1863dc) and
   2-6px radii, so it's the one thing on the page that visibly isn't part of
   this site. Selectors and computed defaults verified against the live
   widget - see the class list this reskins below; !important matches the
   specificity of CookieYes's own injected <style> block, same reasoning as
   the GTranslate override above. */
.cky-consent-bar,
.cky-modal,
.cky-preference-center {
	border-radius: 14px !important;
	box-shadow: var(--lp-shadow-lg) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
}

.cky-title,
.cky-preference-title,
.cky-accordion-btn {
	font-weight: 700 !important;
	color: var(--wp--preset--color--ink) !important;
}

.cky-notice-des,
.cky-notice-des p,
.cky-accordion-header-des,
.cky-preference-content-wrapper p {
	color: var(--wp--preset--color--body-text) !important;
}

.cky-notice-des a {
	color: var(--wp--preset--color--primary) !important;
	text-decoration: underline;
}

.cky-notice-des a:hover {
	color: var(--wp--preset--color--primary-dark) !important;
}

.cky-preference-header {
	border-bottom-color: var(--wp--preset--color--border) !important;
}

.cky-footer-wrapper {
	border-top-color: var(--wp--preset--color--border) !important;
}

.cky-btn {
	border-radius: 8px !important;
	font-weight: 600 !important;
	transition: background-color 0.18s var(--lp-ease), border-color 0.18s var(--lp-ease), color 0.18s var(--lp-ease);
}

/* Primary action - matches the site's one filled button per screen. */
.cky-btn-accept {
	background-color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
	color: #fff !important;
}

.cky-btn-accept:hover {
	background-color: var(--wp--preset--color--primary-dark) !important;
	border-color: var(--wp--preset--color--primary-dark) !important;
}

/* Secondary actions - neutral outline instead of the default blue-on-blue,
   so "Přijmout vše" reads as the one clear default choice. */
.cky-btn-reject,
.cky-btn-customize,
.cky-btn-preferences {
	background-color: transparent !important;
	border-color: var(--wp--preset--color--border) !important;
	color: var(--wp--preset--color--body-text) !important;
}

.cky-btn-reject:hover,
.cky-btn-customize:hover,
.cky-btn-preferences:hover {
	border-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary-dark) !important;
	background-color: var(--wp--preset--color--primary-tint) !important;
}

.cky-btn-close {
	color: var(--wp--preset--color--body-text) !important;
	transition: color 0.18s var(--lp-ease);
}

.cky-btn-close:hover {
	color: var(--wp--preset--color--ink) !important;
}

/* Floating reopen button (bottom-left, once a choice is already made). */
.cky-btn-revisit {
	background-color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
}

.cky-btn-revisit:hover {
	background-color: var(--wp--preset--color--primary-dark) !important;
}