/* EkoZmeko Energy — Elementor bindings. REWRITTEN 2026-08-14 against the design
   manual's own component implementations (_ds_bundle.js). Every metric below is
   copied from a named component, not eyeballed — the comment on each section
   names its source. If a value looks odd, check the bundle before "fixing" it.

   Load order: tokens → design-system layer → this file.

   THE BUILD CONTRACT
   Elementor containers carry structure and CSS classes only; every visual value
   comes from here, keyed off a class. That keeps the site on the token scale.

   SPECIFICITY NOTE
   Elementor's generated per-page CSS binds every widget to a Global slot at
   0,2,0–0,3,0 and loads after us. Rules that must beat it are prefixed with
   `body`. Deterministic; no !important.
   ------------------------------------------------------------------------- */

/* ============ 1. Containers, width, rhythm =============================== */

/* Elementor ships every container with a default 10px padding. It used to be
 * zeroed here, by setting the eight `--padding-*` custom properties on `.e-con`
 * — which are the very properties the container's own Padding field writes.
 * The reset therefore disabled that field on every container on the site: a
 * padding set in the editor was silently overwritten and looked ignored.
 *
 * The default now comes to zero from the kit's Layout → Container Padding
 * (build/07-theme-style.php), which is where Elementor expects it, and the
 * per-container field works. MAR-1603 spike. */


.e-con.e-con-boxed > .e-con-inner {
	max-width: var(--ekz-container-max);
	padding-inline: var(--ekz-gutter);
	margin-inline: auto;
	width: 100%;
	flex: 1 1 auto;
}
.e-con.ekz-narrow > .e-con-inner { max-width: var(--ekz-container-narrow); }

.e-con.ekz-section    { padding-block: var(--ekz-section-md); }
.e-con.ekz-section-sm { padding-block: var(--ekz-section-sm); }
.e-con.ekz-section-flush { padding-block: 0; }
/* The 404 band. The class had no rule, so its content touched the header and the
 * footer; a section like every other (Maroš, MAR-1634, 2026-09-27: 96 everywhere). */
.e-con.ekz-section-lg { padding-block: var(--ekz-section-md); }

/* MAR-1603 — the page header's rhythm is its container's Padding field, set in
 * page_header() (96 / 72 / 48 since MAR-1634). The page body: 24 under a bare
 * header, the section rhythm above the footer — 96 / 72 / 48 through
 * --ekz-section-md, so it needs no media query of its own (MAR-1635 Q04 + Q05). */
.e-con.ekz-page-body { padding-block: var(--ekz-gap) var(--ekz-section-md); }
/* Under a page-header BAND (dark, sunken, photo) the body is a section of its own
 * and starts a full rhythm step below the band (Maroš, MAR-1634, 2026-09-27: it
 * was 24 — the gap he marked between the Projekty band and the first card).
 * Under a bare header (cart, checkout, account, size guide) breadcrumb, H1 and
 * content are one section on one surface, so the 24 stays. */
.e-con.ekz-pagehead:is(.ekz-on-dark, .ekz-surface-sunken, .ekz-photo-band) + .e-con.ekz-page-body { padding-top: var(--ekz-section-md); }

/* Elementor spaces widgets with margins; the system uses container gaps. */
.e-con .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* ============ 2. Grid + stack bindings =================================== */
/* Boxed containers put children in .e-con-inner; full-width containers hold
   them directly. The design system's own grid classes must be neutralised on
   the boxed .e-con (they'd trap everything in the first 1fr track) and applied
   one level down. */

.e-con-boxed.ekz-grid-2, .e-con-boxed.ekz-grid-3, .e-con-boxed.ekz-grid-4,
.e-con-boxed.ekz-grid-catalog, .e-con-boxed.ekz-grid-product,
.e-con-boxed.ekz-grid-form-2, .e-con-boxed.ekz-hairline-grid {
	display: flex; grid-template-columns: none; gap: 0;
}
.e-con-boxed.ekz-grid-2 > .e-con-inner, .e-con-full.ekz-grid-2,
.e-con-boxed.ekz-grid-3 > .e-con-inner, .e-con-full.ekz-grid-3,
.e-con-boxed.ekz-grid-4 > .e-con-inner, .e-con-full.ekz-grid-4,
.e-con-boxed.ekz-grid-catalog > .e-con-inner, .e-con-full.ekz-grid-catalog,
.e-con-boxed.ekz-grid-product > .e-con-inner, .e-con-full.ekz-grid-product,
.e-con-boxed.ekz-grid-form-2 > .e-con-inner, .e-con-full.ekz-grid-form-2 { display: grid; }

.e-con-boxed.ekz-grid-2 > .e-con-inner, .e-con-full.ekz-grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--ekz-gap); }
.e-con-boxed.ekz-grid-3 > .e-con-inner, .e-con-full.ekz-grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--ekz-gap); }
.e-con-boxed.ekz-grid-4 > .e-con-inner, .e-con-full.ekz-grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--ekz-gap); }
/* The catalogue is the SAME four-column grid as the category tiles above it, with
   the filter panel taking one column and the listing the other three (MAR-1612).
   It used to be `268px 1fr`, so the filter column was 54 px narrower than the
   first tile and the two bands visibly failed to line up. A fixed width can only
   agree with the tiles by coincidence; sharing the grid makes them agree by
   construction, at every width, for good. */
.e-con-boxed.ekz-grid-catalog > .e-con-inner, .e-con-full.ekz-grid-catalog { grid-template-columns: repeat(4, 1fr); gap: var(--ekz-gap); align-items: start; }
.ekz-grid-catalog .ekz-facets { grid-column: span 1; }
.ekz-grid-catalog .ekz-catalog { grid-column: span 3; min-width: 0; }
.e-con-boxed.ekz-grid-product > .e-con-inner, .e-con-full.ekz-grid-product { grid-template-columns: 1.05fr 1fr; gap: var(--ekz-gap); align-items: start; }
.e-con-boxed.ekz-grid-form-2 > .e-con-inner, .e-con-full.ekz-grid-form-2 { grid-template-columns: 1fr 1fr; gap: var(--ekz-gap); }

@media (max-width: 1024px) {
	.e-con-boxed.ekz-grid-4 > .e-con-inner, .e-con-full.ekz-grid-4 { grid-template-columns: repeat(3, 1fr); }
	.e-con-boxed.ekz-grid-catalog > .e-con-inner, .e-con-full.ekz-grid-catalog { grid-template-columns: 1fr; }
	/* One column below 1024, so the spans above must stop claiming three tracks. */
	.ekz-grid-catalog .ekz-facets, .ekz-grid-catalog .ekz-catalog { grid-column: auto; }
	.e-con-boxed.ekz-grid-product > .e-con-inner, .e-con-full.ekz-grid-product { grid-template-columns: 1fr; gap: var(--ekz-gap); }
}
@media (max-width: 768px) {
	.e-con-boxed.ekz-grid-2 > .e-con-inner, .e-con-full.ekz-grid-2,
	.e-con-boxed.ekz-grid-3 > .e-con-inner, .e-con-full.ekz-grid-3,
	.e-con-boxed.ekz-grid-4 > .e-con-inner, .e-con-full.ekz-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.e-con-boxed.ekz-grid-2 > .e-con-inner, .e-con-full.ekz-grid-2,
	.e-con-boxed.ekz-grid-3 > .e-con-inner, .e-con-full.ekz-grid-3,
	.e-con-boxed.ekz-grid-4 > .e-con-inner, .e-con-full.ekz-grid-4,
	.e-con-boxed.ekz-grid-form-2 > .e-con-inner, .e-con-full.ekz-grid-form-2 { grid-template-columns: 1fr; }
}

/* Stacks and rows */
.e-con.ekz-stack-4  > .e-con-inner, .e-con-full.ekz-stack-4  { gap: var(--ekz-gap-tight); }
.e-con.ekz-stack-8  > .e-con-inner, .e-con-full.ekz-stack-8  { gap: var(--ekz-gap-tight); }
.e-con.ekz-stack-10 > .e-con-inner, .e-con-full.ekz-stack-10 { gap: var(--ekz-gap-tight); }
.e-con.ekz-stack-12 > .e-con-inner, .e-con-full.ekz-stack-12 { gap: var(--ekz-gap-tight); }
.e-con.ekz-stack-14 > .e-con-inner, .e-con-full.ekz-stack-14 { gap: var(--ekz-gap); }
.e-con.ekz-stack-16 > .e-con-inner, .e-con-full.ekz-stack-16 { gap: var(--ekz-gap); }
.e-con.ekz-stack-20 > .e-con-inner, .e-con-full.ekz-stack-20 { gap: var(--ekz-gap); }
.e-con.ekz-stack-24 > .e-con-inner, .e-con-full.ekz-stack-24 { gap: var(--ekz-gap); }
.e-con.ekz-stack-32 > .e-con-inner, .e-con-full.ekz-stack-32 { gap: var(--ekz-gap); }
.e-con.ekz-stack-40 > .e-con-inner, .e-con-full.ekz-stack-40 { gap: var(--ekz-gap); }
.e-con.ekz-stack-0  > .e-con-inner, .e-con-full.ekz-stack-0  { gap: 0; }

.e-con.ekz-row > .e-con-inner, .e-con-full.ekz-row { flex-direction: row; align-items: center; }
.e-con.ekz-row-between > .e-con-inner, .e-con-full.ekz-row-between { flex-direction: row; align-items: center; justify-content: space-between; }
.e-con.ekz-row-wrap > .e-con-inner, .e-con-full.ekz-row-wrap { flex-wrap: wrap; }

/* ============ 3. Surfaces ================================================ */

.e-con.ekz-surface-sunken { background: var(--ekz-surface-sunken); border-top: 1px solid var(--ekz-border-subtle); }
.e-con.ekz-on-dark        { background: var(--ekz-surface-inverse); color: var(--ekz-text-on-inverse-muted); }
.e-con.ekz-on-dark-deep   { background: var(--ekz-surface-inverse-deep); color: var(--ekz-text-on-inverse-muted); }

/* Photo band (Hero/PageHeader photo variants): image under a scrim.
   Bundle Hero: image opacity .42 + saturate(.85), then --ekz-scrim-dark. */
/* background-COLOR, not the `background` shorthand: the shorthand resets
   background-image, and this selector (0,2,0) outranks the .elementor-element-*
   rule (0,1,0) that now carries the hero photograph as a native Background
   field. With the shorthand here the field saves, shows in the editor, and
   renders nothing (MAR-1609). */
.e-con.ekz-photo-band { position: relative; background-color: var(--ekz-surface-inverse-deep); overflow: hidden; }
.e-con.ekz-photo-band > .e-con-inner { position: relative; z-index: 2; }
.e-con.ekz-photo-band::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-image: inherit; background-size: cover; background-position: center;
	opacity: .42; filter: saturate(.85);
}
.e-con.ekz-photo-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--ekz-scrim-dark); }
/* Subpage photo headers (Kariéra): the title runs to ~70 % of the width, past
 * the point where the bundle scrim has faded to ~.4 — "a montážnikov" sat on the
 * light grey photo. The homepage hero keeps the bundle scrim (its copy is narrow
 * and its photo dark; Maroš: "Homepage má dobrú čitateľnosť", 2026-10-17). */
.e-con.ekz-photo-band:not(.ekz-hero)::after { background: linear-gradient(90deg, #0B0E10 8%, rgba(11, 14, 16, .8) 60%, rgba(11, 14, 16, .55)); }
/* Phones: the text runs the full width, so the scrim must too. The desktop
 * scrim fades to 15 % on the right, where the copy sits on a phone — on Kariéra's
 * light photo the lede read grey on grey (Maroš, iPhone, 2026-10-17). An even
 * dark veil keeps the photo visible and the type above 7:1. */
@media (max-width: 768px) {
	.e-con.ekz-photo-band::after,
	.e-con.ekz-photo-band:not(.ekz-hero)::after { background: linear-gradient(180deg, rgba(11, 14, 16, .86) 0%, rgba(11, 14, 16, .74) 100%); }
}

/* ============ 4. Typography ============================================= */
/* Element defaults for unclassed headings, then the type classes. */

body .elementor-widget-heading .elementor-heading-title {
	font-family: var(--ekz-font-heading);
	color: var(--ekz-text-strong);
	margin: 0;
}
body .elementor-widget-heading h1.elementor-heading-title { font-size: var(--ekz-size-h1); line-height: var(--ekz-lh-heading); }
body .elementor-widget-heading h2.elementor-heading-title { font-size: var(--ekz-size-h2); line-height: var(--ekz-lh-heading); }
body .elementor-widget-heading h3.elementor-heading-title { font-size: var(--ekz-size-h3); line-height: var(--ekz-lh-snug) }
body .elementor-widget-heading h4.elementor-heading-title { font-size: var(--ekz-size-h4); line-height: var(--ekz-lh-snug); letter-spacing: 0; }
body .elementor-widget-heading h5.elementor-heading-title { font-size: var(--ekz-size-h5); line-height: var(--ekz-lh-snug); letter-spacing: 0; }

body .ekz-on-dark .elementor-widget-heading .elementor-heading-title,
body .ekz-on-dark-deep .elementor-widget-heading .elementor-heading-title,
body .ekz-photo-band .elementor-widget-heading .elementor-heading-title,
body .ekz-footer .elementor-widget-heading .elementor-heading-title { color: var(--ekz-text-on-inverse); }

/*
 * Headings are 900 (brief B8, MAR-1634 H01) and read it from the one token.
 *
 * Each rule used to set the token weight and then repeat a literal 700 or 600
 * on the next line, so the token decided nothing; in h3 a missing semicolon
 * also swallowed its font-stretch, leaving it at 100% while h1/h2 were widened.
 * One declaration each now: the weight token and the designed width.
 */
body .elementor-widget.ekz-display-1 .elementor-heading-title {
	font-size: var(--ekz-size-display-1); line-height: var(--ekz-lh-tight);
	font-weight: var(--ekz-weight-heading); font-stretch: 112%;
}
body .elementor-widget.ekz-display-2 .elementor-heading-title {
	font-size: var(--ekz-size-display-2); line-height: var(--ekz-lh-display);
	font-weight: var(--ekz-weight-heading); font-stretch: 110%;
}
body .elementor-widget.ekz-h1 .elementor-heading-title {
	font-size: var(--ekz-size-h1); line-height: var(--ekz-lh-heading);
	font-weight: var(--ekz-weight-heading); font-stretch: 108%;
}
body .elementor-widget.ekz-h2 .elementor-heading-title {
	font-size: var(--ekz-size-h2); line-height: var(--ekz-lh-heading);
	font-weight: var(--ekz-weight-heading); font-stretch: 108%;
}
body .elementor-widget.ekz-h3 .elementor-heading-title {
	font-size: var(--ekz-size-h3); line-height: var(--ekz-lh-snug);
	font-weight: var(--ekz-weight-heading); font-stretch: 104%;
}
body .elementor-widget.ekz-h4 .elementor-heading-title {
	font-size: var(--ekz-size-h4); line-height: var(--ekz-lh-snug);
	font-weight: var(--ekz-weight-heading); font-stretch: 100%; letter-spacing: 0;
}
@media (max-width: 768px) {
	body .elementor-widget.ekz-display-1 .elementor-heading-title { font-size: var(--ekz-size-display-1); }
	body .elementor-widget.ekz-h1 .elementor-heading-title { font-size: var(--ekz-size-h1); }
	body .elementor-widget.ekz-h2 .elementor-heading-title { font-size: var(--ekz-size-h2); }
}

/* Text editor + measures */
body .elementor-widget-text-editor { color: var(--ekz-text-body); font-size: var(--ekz-size-body); line-height: var(--ekz-lh-body); }
body .ekz-on-dark .elementor-widget-text-editor,
body .ekz-on-dark-deep .elementor-widget-text-editor,
body .ekz-photo-band .elementor-widget-text-editor,
body .ekz-footer .elementor-widget-text-editor,
body .ekz-header--dark .elementor-widget-text-editor { color: var(--ekz-text-on-inverse-muted); }

/* Hero lede (bundle Hero): body-lg 19px, max 46ch. Its colour is the ONE grey
   allowed on dark (MAR-1635 Q01) — it was ink-300, a second one. */
body .elementor-widget.ekz-hero-lede, body .elementor-widget.ekz-hero-lede p {
	font-size: var(--ekz-size-body-lg); color: var(--ekz-text-on-inverse-muted); max-width: 46ch;
}
/* PageHeader lede: body-lg, skin colour, max 56ch. */
body .elementor-widget.ekz-lede, body .elementor-widget.ekz-lede p { font-size: var(--ekz-size-body-lg); max-width: 56ch; }
body .ekz-on-dark .elementor-widget.ekz-lede p, body .ekz-on-dark-deep .elementor-widget.ekz-lede p, body .ekz-photo-band .elementor-widget.ekz-lede p { color: var(--ekz-text-on-inverse-muted); }
/* SectionHead lede: plain body 17px, max 52ch. */
body .elementor-widget.ekz-sh-lede, body .elementor-widget.ekz-sh-lede p { font-size: var(--ekz-size-body); max-width: 52ch; margin: 0; }
body .ekz-on-dark .elementor-widget.ekz-sh-lede p, body .ekz-on-dark-deep .elementor-widget.ekz-sh-lede p { color: var(--ekz-text-on-inverse-muted); }
body .ekz-body-sm, body .ekz-body-sm p { font-size: var(--ekz-size-body-sm); }

/* ============ 5. Badge / eyebrows (bundle Badge + Hero) ================== */

.elementor-widget.ekz-eyebrow, .elementor-widget.ekz-badge, .elementor-widget.ekz-hero-eyebrow { background: none; border: 0; padding: 0; }

/* Section eyebrow = Badge tone accent, uppercase: 4px 12px, radius 4, 600 12/1.35. */
body .elementor-widget.ekz-eyebrow .elementor-heading-title {
	display: inline-flex; align-items: center;
	/* The one border width, 2px; 3/11 keeps the 26px pill that 4/12 + 1px made
	   (MAR-1634, 2026-09-27). */
	padding: 3px 11px; border-radius: var(--ekz-radius-badge);
	background: var(--ekz-green-50); color: var(--ekz-green-800);
	border: 2px solid var(--ekz-green-100);
	font-size: 12px; line-height: 1.35; font-weight: var(--ekz-weight-semibold);
 text-transform: uppercase;
}
/* On dark: tone accentDark — wash bg, green-500 text, no border. */
body .ekz-on-dark .elementor-widget.ekz-eyebrow .elementor-heading-title,
body .ekz-on-dark-deep .elementor-widget.ekz-eyebrow .elementor-heading-title {
	background: var(--ekz-accent-wash); color: var(--ekz-accent-text-dark); border-color: transparent;
}

/* Hero eyebrow (bundle Hero): NO chip — a 36×2 accent dash + 600 13/1 caps green-500. */
body .elementor-widget.ekz-hero-eyebrow .elementor-heading-title {
	display: inline-flex; align-items: center; gap: var(--ekz-gap-tight);
	background: none; border: 0; padding: 0;
	color: var(--ekz-accent-text-dark);
	font-size: 13px; line-height: 1; font-weight: var(--ekz-weight-semibold);
 text-transform: uppercase;
}
body .elementor-widget.ekz-hero-eyebrow .elementor-heading-title::before {
	content: ""; width: 36px; height: 2px; background: var(--ekz-accent); flex: 0 0 auto;
}

/* Meta line (project cards): 600 12/1 caps faint. */
body .elementor-widget.ekz-meta .elementor-heading-title {
	font-size: 12px; line-height: 1; font-weight: var(--ekz-weight-semibold);
 text-transform: uppercase; color: var(--ekz-text-faint);
}

/* ============ 6. Buttons (bundle Button) ================================= */
/* One box for every button: 12/24, 15/700, line 1.2, 1px border → 44px, radius 6.
   Small keeps 13px text in the same 44px box (MAR-1634 B01). */

body .elementor-widget-button .elementor-button,
body .elementor-widget-form .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--ekz-gap-tight);
	background-color: var(--ekz-action-primary); color: var(--ekz-action-primary-text);
	border: 1px solid transparent; border-radius: var(--ekz-radius-button);
	font-family: var(--ekz-font-core); font-size: 15px; line-height: 1.2;
	/* Was one invalid declaration (missing semicolon) — the browser dropped both
	   the weight and the text-transform (MAR-1634). */
	font-weight: var(--ekz-weight-bold); text-transform: none;
	padding: 12px 24px;
	transition: var(--ekz-transition-color);
	min-height: 0;
}
/* No Large rule: Large was 16/32 at 17px — off the type scale (D4: 12/13/15/18+)
   and a 54px button beside 44px ones. The build writes `md` now; a Large chosen
   in the editor renders as the base button above, which beats Elementor's own
   size CSS. Small was 8/16 → a 34px button; only its text size differs now, and
   the taller line keeps it at 44 (MAR-1634 B01). */
body .elementor-widget-button .elementor-button.elementor-size-sm { font-size: 13px; line-height: 1.4; }
body .elementor-widget-button .elementor-button:hover, body .elementor-widget-button .elementor-button:focus,
body .elementor-widget-form .elementor-button:hover {
	background-color: var(--ekz-action-primary-hover); color: var(--ekz-action-primary-text);
}

/* Secondary: ONE border, the control border #D7DDDA, on light and on dark alike
   (MAR-1635 Q07: "Nie, zjednotiť" — no translucent inverse variant). Hover never
   moves the border; only the fill answers. */
body .elementor-widget.ekz-btn-secondary .elementor-button {
	background: var(--ekz-white); color: var(--ekz-action-secondary-text);
	/* 2px, the one control border (MAR-1634, 2026-09-27); 11/23 instead of the
	   kit's 12/24 keeps the box at 44 beside a primary button with its 1px. */
	border: 2px solid var(--ekz-border-default); padding: 11px 23px;
}
body .elementor-widget.ekz-btn-secondary .elementor-button:hover {
	background: var(--ekz-surface-sunken); color: var(--ekz-action-secondary-text); border-color: var(--ekz-border-default);
}
body .ekz-on-dark .elementor-widget.ekz-btn-secondary .elementor-button,
body .ekz-on-dark-deep .elementor-widget.ekz-btn-secondary .elementor-button,
body .ekz-photo-band .elementor-widget.ekz-btn-secondary .elementor-button {
	color: #fff; border-color: var(--ekz-border-default); background: transparent;
}
body .ekz-on-dark .elementor-widget.ekz-btn-secondary .elementor-button:hover,
body .ekz-on-dark-deep .elementor-widget.ekz-btn-secondary .elementor-button:hover,
body .ekz-photo-band .elementor-widget.ekz-btn-secondary .elementor-button:hover {
	border-color: var(--ekz-border-default); background: rgba(255, 255, 255, .08); color: #fff;
}

/* Quiet link-with-arrow ("Zistiť viac" style action). */
body .elementor-widget.ekz-btn-link .elementor-button { background: transparent; border: 0; padding: 0; color: var(--ekz-text-accent); }
body .elementor-widget.ekz-btn-link .elementor-button:hover { background: transparent; color: var(--ekz-text-link-hover); }

/* ============ 7. Header (bundle Header) ================================== */

.ekz-header { position: relative; z-index: var(--ekz-z-header); }

/* Topbar: 40px, 13/1, icons 14. Dark: ink-900 bg. Light: sunken bg + hairline. */
.e-con.ekz-topbar { padding-block: 0; }
.ekz-header--dark .ekz-topbar { background: var(--ekz-surface-inverse-deep); }
.ekz-header--light .ekz-topbar { background: var(--ekz-surface-sunken); border-bottom: 1px solid var(--ekz-border-subtle); }
.e-con.ekz-topbar > .e-con-inner {
	flex-direction: row; align-items: center; justify-content: space-between;
	min-height: var(--ekz-topbar-height); gap: var(--ekz-gap);
}
.e-con-full.ekz-topbar__left { flex-direction: row; align-items: center; gap: var(--ekz-gap); width: auto; }
.e-con-full.ekz-topbar__right { flex-direction: row; align-items: center; width: auto; }
/* E-mail and phone sit side by side through the icon list's own Layout: Inline and
   Space Between 24 (10-header.php). No flex, gap or padding rule here: a row built
   in CSS kept Elementor's vertical item spacing and dropped the phone 5px below
   the e-mail (MAR-1634). */
body .ekz-topbar .elementor-widget-icon-list .elementor-icon-list-item > a,
body .ekz-topbar .elementor-widget-icon-list .elementor-icon-list-text {
	font-size: 13px; line-height: 1; font-weight: var(--ekz-weight-regular);
}
body .ekz-topbar .elementor-widget-icon-list .elementor-icon-list-icon svg { width: 14px; height: 14px; }
.ekz-header--dark .ekz-topbar { color: var(--ekz-text-on-inverse-muted); }
body .ekz-header--dark .ekz-topbar .elementor-icon-list-item > a,
body .ekz-header--dark .ekz-topbar .elementor-icon-list-text { color: var(--ekz-text-on-inverse-muted); }
body .ekz-header--light .ekz-topbar .elementor-icon-list-item > a,
body .ekz-header--light .ekz-topbar .elementor-icon-list-text { color: var(--ekz-text-muted); }
/* No `a:hover` here: the text is the span inside the link and the rules above
   colour the span, so a hover on the <a> never showed. The hover is the icon
   list's own Hover colour field (lib.php ekz_icon_list_hover(), MAR-1634 L01). */

/* Main bar: 80px, gap 36, logo 40. */
.ekz-header--dark .ekz-headerbar { background: var(--ekz-surface-inverse); }
/* The light header's one hairline: this border, no shadow line under it. */
.ekz-header--light .ekz-headerbar { background: #fff; border-bottom: 1px solid var(--ekz-border-subtle); }
.e-con.ekz-headerbar { padding-block: 0; }
/* The gap is the container's Gaps field since MAR-2489 (24, phone 12). */
.e-con.ekz-headerbar > .e-con-inner {
	flex-direction: row; align-items: center; min-height: var(--ekz-header-height);
}
.e-con-full.ekz-header__logo { flex: 0 0 auto; width: auto; flex-direction: row; align-items: center; }
/* 26: the letters' height. The files are cropped to the drawing (MAR-1634); at
   the old 40 the transparent border was a third of the box, so the visible
   wordmark was this size all along and now starts on the content edge. */
.ekz-header__logo img { height: 26px; width: auto; display: block; }

/* No plate. The white header carries the wordmark drawn for a light ground
   (media slug `logo-light-ground`, 10-header.php) instead of the dark-ground
   original on an ink box (Maroš, MAR-1634, 2026-09-27). Same 26 / 21 height
   as the dark header, so both bars keep one logo size. */

/* Nav: the Elementor Pro Menu widget since MAR-2492 — typography, colours, the
   2px underline, spacing, the burger and the Eshop panel are all its fields and
   containers (10-header.php ekz_main_menu). The old Nav Menu rules are gone. */
.e-con-full.ekz-header__nav { flex: 1 1 auto; width: auto; min-width: 0; flex-direction: row; align-items: center; }
/* Mechanics only: the burger and the per-item "open" chevron are <button>s, and
   the kit's Theme Style button (green fill) repaints every button on the page —
   the open burger turned into a green tile. The widget has no background field
   for either, so they stay transparent here. */
body .ekz-header .ekz-megamenu :is(.e-n-menu-toggle, .e-n-menu-dropdown-icon),
body .ekz-header .ekz-megamenu :is(.e-n-menu-toggle, .e-n-menu-dropdown-icon):is(:hover, :focus, :active) {
	background: transparent; box-shadow: none;
}
/* Category tiles everywhere — catalogue band, mega menu, home page (MAR-2492): the
   Podkategórie widget, every look in its fields (lib.php ekz_category_tiles). Only
   the mechanics no field expresses live here, unscoped, because ekz-catalog.css
   loads on the catalogue only: grid, picture beside the name, the photo never
   cropped, and the name over its product count. */
.ekz-subcats { display: grid; width: 100%; }
/* min-height 0: the catalogue's 96px floor (ekz-catalog.css) made the band's tiles
   4px taller than the same tile in the menu and on the home page; the grid's
   stretch already levels a row. */
.ekz-subcat { display: flex; align-items: center; min-height: 0; text-decoration: none; transition: var(--ekz-transition-card); }
.ekz-subcat__img { flex: 0 0 auto; object-fit: contain; aspect-ratio: 1; }
.ekz-subcat__img--empty { padding: 8px; color: var(--ekz-line-faint); background: var(--ekz-surface-sunken); }
:is(.ekz-subcat__name, .ekz-subcat__text) { min-width: 0; }
.ekz-subcat__text { display: flex; flex-direction: column; gap: 2px; }

/* Right group: search pill clamp(120px,16vw,210px) + 42px cart icon. */
/* Gap: the container's Gaps field (12, phone 8) since MAR-2489. */
.e-con-full.ekz-header__actions { flex: 0 0 auto; width: auto; flex-direction: row; align-items: center; margin-left: auto; }
/* The live search (Elementor Pro Search widget, 10-header.php — every look is
   its own field). Only its width in the bar is set here: the Width field would
   be one fixed number, the bar needs it to give way between 1025 and 1280. */
.elementor-widget.ekz-header__search { width: clamp(180px, 20vw, 260px); }
/* Padding of the Search widget's field. The widget computes it as its own
   Padding + the search icon + the gap, but the kit's Form Fields padding
   (`.elementor-kit-12 input:not(…):not(…)`, 0,3,1) outranks the widget's
   selector and set a flat 11 — the icon sat on the first letters. No field can
   outrank the kit, so the widget's own formula is restated here. */
body .elementor-widget.elementor-widget-search input.e-search-input {
	padding-block: var(--e-search-input-padding-block-start) var(--e-search-input-padding-block-end);
	padding-inline: calc(var(--e-search-input-padding-inline-start) + var(--e-search-icon-label-absolute-width) + var(--e-search-input-gap)) calc(var(--e-search-input-padding-inline-end) + var(--e-search-icon-clear-absolute-width) + var(--e-search-input-gap));
}

body .ekz-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button {
	width: 42px; height: 42px; padding: 0; justify-content: center;
	background: transparent; border-radius: var(--ekz-radius-button);
	font-size: 0; /* hide subtotal text — the manual's header shows the icon only */
}
/* Colours, border, radius and icon size: the widget's Toggle Button fields
   (10-header.php). The colour that stood here reached the button but not the
   icon — the widget paints it through --toggle-button-icon-color, so the cart
   stayed grey on the dark header (Maroš, 2026-10-17). */
body .ekz-header .elementor-button-icon .elementor-button-icon-qty {
	position: absolute; top: -5px; right: -5px; margin: 0; min-width: 18px; height: 18px;
	display: flex; align-items: center; justify-content: center; padding: 0 4px;
	background: var(--ekz-action-primary); color: #fff; border-radius: var(--ekz-radius-pill);
	font-size: 12px; font-weight: var(--ekz-weight-bold); line-height: 1;
}
body .ekz-header .elementor-menu-cart__toggle .elementor-button-icon { position: relative; }

/* ============ 8. Hero (bundle Hero) ====================================== */

.e-con.ekz-hero { min-height: 600px; }
/* The hero reads the same rhythm token as the footer instead of a literal
   64px of its own — that literal is how one decision ("64 becomes 48",
   MAR-1627) had two places to be made in. */
/* The section rhythm like every section (MAR-1634, 2026-09-27; was 48). At 1440 the
   600px minimum height still decides; on a phone the step is 48 either way. */
.e-con.ekz-hero > .e-con-inner { justify-content: center; align-items: flex-start; gap: var(--ekz-gap); padding-block: var(--ekz-section-md); }
.ekz-hero .elementor-widget.ekz-display-1 .elementor-heading-title { color: #fff; max-width: 15ch; }
/* No margin of its own: the hero's gap (24) is the whole space above the buttons.
   A 16 here made lede → buttons 40, off the 24/12 scale (MAR-1634). The 404 page
   uses the same row. */
.e-con-full.ekz-hero__actions { flex-direction: row; align-items: center; gap: var(--ekz-gap); flex-wrap: wrap; width: auto; }
@media (max-width: 768px) { .e-con.ekz-hero { min-height: 0; } }

/* ============ 9. Stat band (bundle StatBand + Stat) ====================== */
/* Hairline separators come from grid gap 1 over a border-inverse background. */

.e-con.ekz-statband { padding-block: 0; background: var(--ekz-surface-inverse); border-top: 1px solid var(--ekz-border-inverse); }
/* The hairline background lives on a dedicated full-width grid child so it can
   never paint the container's gutter (kit: container > grid > cells). */
.e-con-full.ekz-statband__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ekz-border-inverse); }
.e-con-full.ekz-statband__item { background: var(--ekz-surface-inverse); padding: var(--ekz-gap); gap: var(--ekz-gap-tight); width: auto; }
.e-con-full.ekz-statband__grid > .e-con-full.ekz-statband__item:first-child { padding-left: 0; }
/* Green figures stay (MAR-1635 Q02) in the ONE dark-surface green: the identity
   #0F8F45 was a third text green. The stat only ever sits on the dark band. */
body .elementor-widget.ekz-stat .elementor-heading-title,
body .ekz-on-dark .elementor-widget.ekz-stat .elementor-heading-title,
body .ekz-statband .elementor-widget.ekz-stat .elementor-heading-title {
	font-size: 48px; line-height: 1; font-weight: var(--ekz-weight-bold);
	color: var(--ekz-accent-text-dark); font-stretch: 108%;
}
body .ekz-statband .elementor-widget-text-editor, body .ekz-statband .elementor-widget-text-editor p {
	font-size: 15px; line-height: 1.5; color: var(--ekz-text-on-inverse-muted); max-width: 26ch;
}
@media (max-width: 768px) {
	.e-con-full.ekz-statband__grid { grid-template-columns: 1fr; }
	.e-con-full.ekz-statband__grid > .e-con-full.ekz-statband__item:first-child { padding-left: var(--ekz-gap); }
}

/* ============ 10. Section head (bundle SectionHead, align=split) ========= */
/* Eyebrow chip on its own line; under it H2 (max 18ch) left, lede + action right,
   both from the H2's top edge (Maroš, MAR-1634, 2026-09-27: "zarovnajme hore" —
   they were bottom-aligned, level with the H2's last line). marginBottom 48 ·
   the row wraps on tablet. */

.e-con.ekz-sectionhead { padding-block: 0 var(--ekz-section-sm); }
.e-con.ekz-sectionhead > .e-con-inner,
.e-con-full.ekz-sectionhead { flex-direction: column; gap: var(--ekz-gap); }
.e-con-full.ekz-sectionhead__row {
	flex-direction: row; align-items: flex-start; justify-content: space-between;
	gap: var(--ekz-gap); flex-wrap: wrap;
}
.e-con-full.ekz-sectionhead__text { flex-direction: column; width: auto; flex: 0 1 auto; }
.ekz-sectionhead__text .elementor-widget.ekz-h2 .elementor-heading-title { max-width: 18ch; }
.e-con-full.ekz-sectionhead__side { flex-direction: row; align-items: flex-start; gap: var(--ekz-gap); width: auto; flex: 0 1 auto; }
@media (max-width: 768px) {
	.e-con-full.ekz-sectionhead__side { flex-direction: column; align-items: flex-start; gap: var(--ekz-gap); }
}

/* ============ 11. Cards ================================================== */

/* Card shell. One border for every card and panel: 2px of the light card grey
 * (Maroš, MAR-1634, 2026-09-27: "biely alebo jemne sivý, jednotný, 2px"). */
.e-con.ekz-card {
	background: var(--ekz-surface-raised); border: 2px solid var(--ekz-border-subtle);
	border-radius: var(--ekz-radius-card); box-shadow: var(--ekz-shadow-1);
	overflow: hidden; transition: var(--ekz-transition-card);
}
/* Only a card you can click answers the pointer (MAR-1635 Q06), and it does so
 * with its border turning the identity green — no lift, no deeper shadow (Maroš,
 * MAR-1634, 2026-09-27: the lift was "rušivé na eshope"). The border keeps its
 * width, so nothing moves. A clickable card is an <a> — see con() in lib.php. */
a.e-con.ekz-card:hover { border-color: var(--ekz-accent); }

/* A container that IS the link keeps its content's own colours: the kit's link
 * green and underline belong to links in running text, not to a whole card. */
body a.e-con, body a.e-con:hover, body a.e-con:focus { color: inherit; text-decoration: none; }
body a.e-con:focus-visible { outline: 2px solid var(--ekz-focus-ring); outline-offset: 2px; }

/* A white card on a dark band is a light surface again: its text, headings and
 * secondary button take the light values, not the band's (MAR-1635 Q03 — the
 * open positions on Kariéra). */
body .ekz-on-dark .e-con.ekz-card { color: var(--ekz-text-body); }
body .ekz-on-dark .e-con.ekz-card .elementor-heading-title { color: var(--ekz-text-strong); }
body .ekz-on-dark .e-con.ekz-card .elementor-widget-text-editor,
body .ekz-on-dark .e-con.ekz-card .elementor-widget-text-editor p { color: var(--ekz-text-body); }
body .ekz-on-dark .e-con.ekz-card .elementor-widget.ekz-btn-secondary .elementor-button {
	color: var(--ekz-action-secondary-text); border-color: var(--ekz-border-default); background: var(--ekz-white);
}
body .ekz-on-dark .e-con.ekz-card .elementor-widget.ekz-btn-secondary .elementor-button:hover {
	color: var(--ekz-action-secondary-text); border-color: var(--ekz-border-default); background: var(--ekz-surface-sunken);
}
/* A button closing a card sits on the card's bottom edge, so cards of unequal
 * text end their actions on one line. */
.e-con.ekz-card > .elementor-widget-button:last-child { margin-top: auto; }

/*
 * The subcategory tile is a card and answers like one (MAR-1634 C01): its hover
 * is the border turning green — the widget's own "Rámik po nabehnutí" field
 * (41-wpgb-archive.php), since 2026-09-27 instead of the 3px lift. Only the
 * transition is set here: the tile is an <a>, the site-wide link transition
 * would reach it otherwise, and ekz-catalog.css could not answer — that file is
 * a cascade layer, and a layered rule loses to ANY unlayered one.
 */
.ekz-subcats a.ekz-subcat { transition: var(--ekz-transition-card); }
/* A link that IS the card (title, whole-tile) takes the card's text colour; a
 * link that is a BUTTON keeps its own. Without the exclusions this rule scored
 * (0,3,1) against the `.elementor .ekz-button-primary` Global Class at (0,2,0)
 * and painted every component button's label in body grey on green — MAR-1597.
 * Global Class rules are always one class plus `.elementor`, so anything of ours
 * that reaches deeper than that will silently outrank a class an assistant can
 * see and edit. */
.e-con.ekz-card a:not(.ekz-button-primary):not(.e-button-base):not(.elementor-button) { color: inherit; }

/* Service card (bundle ServiceCard):
   photo 210, index plate ON the photo, body 24/24/32 gap 10,
   h3 600 19/1.32, p 400 15/1.6, arrow link 600 15 accent pinned to bottom. */
/* MAR-1603 spike — the service card, converted to widget fields.
 *
 * Eleven rules stood here. Nine of them were typography, colour, padding,
 * background and image sizing that classic Elementor widgets have had fields for
 * all along; they are set in service_card() in build/lib.php and this stylesheet
 * has nothing left to say about them. The tenth was `position: relative` on the
 * photo wrapper, which Elementor already puts on every `.e-con` — it was
 * restating a default. The eleventh printed the arrow with `::after`, the one
 * thing no field can express, so the arrow became part of the label instead.
 *
 * Two mechanics remain, both about how the card fills its cell rather than how
 * it looks — owner: this file. */
.ekz-servicecard .elementor-widget-image img { display: block; }
body .elementor-widget.ekz-servicecard__index { position: absolute; left: 0; bottom: 0; width: auto; }
/* Pushes the "Zistiť viac" line to the bottom so a two-line and a four-line card
 * end at the same place. Elementor's margin field takes `auto` only through its
 * custom unit, which stores a string a client cannot read back. */
body .elementor-widget.ekz-cardlink { margin-top: auto; }
.e-con-full.ekz-servicecard__body { flex: 1 1 auto; }

/* Advantages hairline grid (kit HomePage): gap 1 over border-inverse,
   cells 36/32/40, number 38 bold green, h3 600 19/1.3 white, p 400 15/1.65. */
.e-con-boxed.ekz-hairline-grid > .e-con-inner,
.e-con-full.ekz-hairline-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
	background: var(--ekz-border-inverse); border: 1px solid var(--ekz-border-inverse);
	border-radius: var(--ekz-radius-card); overflow: hidden;
}
/* MAR-1603 — background, padding and gap are container fields on the tile; the
 * title's white and the body's type are widget fields. Nothing left here. */
/* The number sits on the dark tile, wherever the tile sits — hence the dark
   green in the base rule too (MAR-1635 Q02). */
body .elementor-widget.ekz-bignum .elementor-heading-title,
body .ekz-on-dark .elementor-widget.ekz-bignum .elementor-heading-title {
	font-size: 38px; line-height: 1; font-weight: var(--ekz-weight-bold);
	color: var(--ekz-accent-text-dark); font-stretch: 108%;
}
/* (title and body type moved to the widgets — MAR-1603) */
@media (max-width: 768px) { .e-con-boxed.ekz-hairline-grid > .e-con-inner, .e-con-full.ekz-hairline-grid { grid-template-columns: 1fr; } }

/* Category tile (kit HomePage eshop section): pad 20, gap 20, img 66 contain. */
/* MAR-1603 — the category tile is container and widget fields now: direction,
 * alignment, gap, padding, background, border, radius and shadow on the tile;
 * size, fit and radius on the thumbnail; type on the label and the count. The
 * arrow moved into the label, where it is text a client can change.
 *
 * Left: the hover and the flex behaviour of the two children — owner: this file.
 * The hover is the card hover, one rule for every card kind drawn here: the
 * border turns green (MAR-1634, 2026-09-27; it was the 3px lift). `mix-blend-mode`
 * too: product photography is shot on white and multiplying it onto the tile is
 * what stops the white square showing. */
.e-con.ekz-cattile { transition: var(--ekz-transition-card); }
a.e-con.ekz-cattile:hover { border-color: var(--ekz-accent); }
.ekz-cattile .elementor-widget-image { width: auto; flex: 0 0 auto; }
.ekz-cattile .elementor-widget-image img { background: var(--ekz-ink-50); mix-blend-mode: multiply; }
.e-con-full.ekz-cattile__text { flex: 1 1 auto; width: auto; }

/* Reference/project card (kit HomePage): photo 170, body 20/20/24 gap 8, title 17/1.4. */
/* MAR-1603 — photo size and fit, body padding and gap, and the title's type are
 * widget fields; the tall variant differs only in the image Height field. Left:
 * the block display, which no field expresses. */
.ekz-projectcard .elementor-widget-image img { display: block; }

/* Generic padded card for prose: the brief's 24 (was 28). */
.e-con.ekz-card-pad > .e-con-inner, .e-con-full.ekz-card-pad { padding: var(--ekz-gap); }

/* ============ 12. CTA band =============================================== */

.e-con.ekz-cta > .e-con-inner { gap: var(--ekz-gap); }
.ekz-cta .ekz-cta__text { max-width: 34ch; }
.e-con-full.ekz-cta__text { gap: var(--ekz-gap); width: auto; }
.e-con-full.ekz-cta__actions { flex-direction: row; align-items: center; gap: var(--ekz-gap); flex-wrap: wrap; width: auto; }

/* ============ 13. Footer (bundle Footer) ================================= */
/* Equal columns auto-fit minmax(210,1fr) gap 40, padBlock 64. Logo 26px.
   Column titles 600 12/1 caps white; links 15/1.5 muted gap 8. */

/* The header's grey, not the deep one (Maroš, MAR-1634, 2026-09-27): the band
   above the footer — "Potrebujete cenovú ponuku?", the 404 — is the deep
   surface, and the two ran into one block. */
.ekz-footer { background: var(--ekz-surface-inverse); color: var(--ekz-text-on-inverse-muted); }
.ekz-footer a { color: var(--ekz-text-on-inverse-muted); }
.ekz-footer a:hover { color: var(--ekz-accent-text-dark); }
/* 96 / 72 / 48 like every section (Maroš, MAR-1634, 2026-09-27; was 48). */
.e-con.ekz-footer__grid { padding-block: var(--ekz-section-md); }
.e-con-boxed.ekz-footer__grid > .e-con-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--ekz-gap); align-items: start; }
.e-con-full.ekz-footer__brand { gap: var(--ekz-gap); }
.ekz-footer__brand .elementor-widget-image { width: auto; }
/* 29: the letters of the former 44px box. The file is cropped to the drawing
   (MAR-1634, 2026-09-27), so the left edge of the letters is the image's edge
   and lines up with the contact icons under it. */
.ekz-footer__brand .elementor-widget-image img { height: 29px; width: auto; }
.e-con-full.ekz-footer__col { gap: var(--ekz-gap); }
/* An h2 since MAR-388 (heading order); font-stretch keeps the h4 look — the
   kit's H2 style widens headings to 108 %. */
body .ekz-footer .elementor-widget.ekz-footer__h .elementor-heading-title {
	font-size: 12px; line-height: 1; font-weight: var(--ekz-weight-semibold); font-stretch: 100%;
 text-transform: uppercase; color: #fff;
}
body .ekz-footer ul.ekz-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ekz-gap-tight); }
body .ekz-footer ul.ekz-links a { font-size: 15px; line-height: 1.5; color: var(--ekz-text-on-inverse-muted); }
body .ekz-footer ul.ekz-links a:hover { color: var(--ekz-accent-text-dark); }
/* Contact lines 12 apart through the icon list's own Space Between (lib.php
   icon_list()). A gap here added to it: 12 + 10 = 22 (MAR-1634). */
body .ekz-footer .elementor-widget-icon-list .elementor-icon-list-item > a,
body .ekz-footer .elementor-widget-icon-list .elementor-icon-list-text { font-size: 15px; line-height: 1.6; color: var(--ekz-text-on-inverse-muted); }
body .ekz-footer .elementor-widget-icon-list .elementor-icon-list-icon svg { width: 15px; height: 15px; color: var(--ekz-accent); fill: var(--ekz-accent); }
/* Hover: the icon list's own field (see the top bar), not an `a:hover` here. */

.e-con.ekz-footer__legal { border-top: 1px solid var(--ekz-border-inverse); padding-block: 24px; }
.e-con.ekz-footer__legal > .e-con-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--ekz-gap); flex-wrap: wrap; }
body .ekz-footer__legal .elementor-widget-text-editor, body .ekz-footer__legal .elementor-widget-text-editor p { font-size: 13px; line-height: 1.5; color: var(--ekz-text-on-inverse-muted); }
body .ekz-footer__legal .elementor-widget-text-editor a { color: var(--ekz-text-on-inverse-muted); }
body .ekz-footer__legal .elementor-widget-text-editor a:hover { color: var(--ekz-accent-text-dark); }

/* ============ 14. Breadcrumbs ============================================ */

.ekz-breadcrumb, .ekz-breadcrumb a, .ekz-breadcrumb p { font-size: 13px; line-height: 1; color: var(--ekz-text-muted); }
.ekz-breadcrumb a:hover { color: var(--ekz-text-accent); }
/* The chevron is punctuation, not a word: lighter than the crumbs and given its
   own breathing room, so the trail reads as steps rather than one long string. */
.ekz-breadcrumb__sep { color: var(--ekz-line-faint); padding-inline: 6px; }
/* The last crumb is where the visitor IS, so it carries the text colour rather
   than the muted one the links use. */
body.woocommerce .woocommerce-breadcrumb { color: var(--ekz-text-body); }
/* On dark the trail is the ONE grey allowed there (MAR-1635 Q01); it was ink-400,
   a second grey. The chevron follows it. */
body .ekz-on-dark .ekz-breadcrumb p, body .ekz-on-dark .ekz-breadcrumb a,
body .ekz-photo-band .ekz-breadcrumb p, body .ekz-photo-band .ekz-breadcrumb a,
body .ekz-on-dark .ekz-breadcrumb__sep, body .ekz-photo-band .ekz-breadcrumb__sep { color: var(--ekz-text-on-inverse-muted); }
body .ekz-on-dark .ekz-breadcrumb a:hover, body .ekz-photo-band .ekz-breadcrumb a:hover { color: var(--ekz-accent-text-dark); }

/* ============ 15. Forms (Elementor Pro Form) ============================= */

/* .ekz-aside has no rule here any more: its card — white, border, 12, 24, gap
   24, shadow — is the container's own fields in aside_card() (MAR-1634 M03). */
/* Label → field 12, rows 24, columns 24: the form widget's own Spacing, Rows Gap
   and Columns Gap fields (lib.php form(), MAR-1634 F01). The 6px margin that
   stood here would have added to the field's 12. */
body .ekz-form .elementor-field-group > label.elementor-field-label {
	font-size: var(--ekz-size-body-sm); font-weight: var(--ekz-weight-semibold);
	color: var(--ekz-text-strong);
}
/* 11 all round, as Theme Style gives inputs (11 inside the 2px control border
   since MAR-1634 2026-09-27; was 12 + 1px). Theme Style's input selector
   outranks this one, so inputs never saw the 14 that stood here — only the
   textarea and the select did, which is how two fields in one form had
   different insets. */
body .ekz-form .elementor-field-textual {
	padding: 11px; font-size: 15px; line-height: 1.4;
	color: var(--ekz-text-strong); background: #fff;
	border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-input);
	transition: border-color var(--ekz-duration-fast) var(--ekz-ease-standard), box-shadow var(--ekz-duration-fast) var(--ekz-ease-standard);
	min-height: 44px;
}
/* Single-line fields 15/1.4 → 47, like the select beside them and every other
   field on the site. The widget's typography default (`.elementor-widget-form
   .elementor-field-group .elementor-field`, 0,3,0, Global Text 1.65) outranks the
   rule above on inputs and made them 51 beside a 47 select in one row (Maroš,
   MAR-1634, 2026-09-27: "vyrovnať výšky v riadku"). The textarea keeps 1.65 —
   running text. */
body .ekz-form .elementor-field-group input.elementor-field-textual { line-height: 1.4; }
body .ekz-form .elementor-field-textual:focus { border-color: var(--ekz-accent); box-shadow: 0 0 0 3px var(--ekz-focus-ring); outline: none; }
body .ekz-form .elementor-field-type-textarea .elementor-field-textual { min-height: 130px; }
body .ekz-form .elementor-field-required .elementor-mark-required { color: var(--ekz-danger-500); }
body .ekz-form .elementor-message.elementor-message-success { color: var(--ekz-accent-text-light); }
body .ekz-form .elementor-message.elementor-message-danger { color: var(--ekz-danger-700); }
body .ekz-form .elementor-field-type-acceptance .elementor-field-subgroup,
body .ekz-form .elementor-field-type-acceptance .elementor-field-option { display: flex; align-items: flex-start; gap: var(--ekz-gap-tight); }
body .ekz-form .elementor-field-type-acceptance > label.elementor-field-label { display: none; }
body .ekz-form .elementor-field-type-acceptance input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ekz-action-primary); flex: 0 0 auto; }
body .ekz-form .elementor-field-type-acceptance .elementor-field-option label { font-size: var(--ekz-size-body-sm); color: var(--ekz-text-body); line-height: 1.5; }
body .ekz-form .elementor-field-group.elementor-field-type-submit { justify-content: flex-start; }
body .ekz-form .elementor-field-group.elementor-field-type-submit .elementor-button,
body .ekz-form .e-form__buttons__wrapper__button,
body .ekz-form button[type="submit"].elementor-button { width: auto; flex: 0 0 auto; }

/* ============ 16. WooCommerce ============================================ */

/* Dual pricing: the native suffix carries the net figure, so the price is two
 * lines and has to stack. That stacking is mechanics and stays here; on the CARD
 * the size, weight and colour of both lines are widget fields (MAR-1595), which
 * is why only the product page keeps its type below. */
.woocommerce div.product p.price, .woocommerce ul.products li.product .price {
	/* 4px, not 3: the scale is 4px above 16 and even below it (MAR-1567). */
	display: flex; flex-direction: column; gap: var(--ekz-gap-tight);
}
/* 28 is the scale step nearest the 32 this used to carry. Product page only. */
.woocommerce div.product p.price {
	font-size: 28px; color: var(--ekz-price-main); font-stretch: 104%; font-weight: 700;
}
.woocommerce div.product p.price .woocommerce-price-suffix {
	font-size: 13px; color: var(--ekz-price-secondary); font-stretch: 100%; font-weight: 400;
}
.woocommerce .price .woocommerce-price-suffix { display: block; margin-top: 4px; }
.woocommerce .price .woocommerce-price-suffix .amount { font-size: inherit; font-weight: inherit; color: inherit; }
.woocommerce del { color: var(--ekz-ink-400); font-weight: 400; font-size: .7em; }

/* Product grid — 3-up cards, contained photography on white. */
/* Column count follows the widget's own columns-N class, so Related (4-up) and
 * the catalogue (3-up) do not need separate rules. */
/* No `gap` here — the Archive Products widget's own Column/Row Gap fields own
 * it (MAR-1595). Column COUNT stays, because that widget removes its own
 * columns control and reads WooCommerce's setting instead. */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
body ul.products.columns-1 { grid-template-columns: 1fr; }
body ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
body ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
body ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
body ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
body ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }

/* Woo's columns-N is now the only column source: the current Archive Products
 * widget renders the page query and stamps ul.products from the Customizer
 * setting (3, set in build/22-shop.php) with no elementor-grid-* wrapper
 * classes. It also carries no breakpoints of its own, so the responsive steps
 * live here: two columns on tablet, one on phones. */
@media (max-width: 1024px) {
	body ul.products[class*="columns-"]:not(.columns-1) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	/* Same :not() as the tablet rule — without it the tablet selector is more
	 * specific and phones stayed at two columns. */
	body ul.products[class*="columns-"]:not(.columns-1) { grid-template-columns: 1fr; }
}

/* Elementor grid classes, kept for the Products widget (related / upsells /
 * cross-sells), which still emits elementor-grid-N and its tablet/mobile
 * variants. On the archive nothing emits them any more. */
body .elementor-grid-1 ul.products { grid-template-columns: 1fr; }
body .elementor-grid-2 ul.products { grid-template-columns: repeat(2, 1fr); }
body .elementor-grid-3 ul.products { grid-template-columns: repeat(3, 1fr); }
body .elementor-grid-4 ul.products { grid-template-columns: repeat(4, 1fr); }
body .elementor-grid-5 ul.products { grid-template-columns: repeat(5, 1fr); }
body .elementor-grid-6 ul.products { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
	body .elementor-grid-tablet-1 ul.products { grid-template-columns: 1fr; }
	body .elementor-grid-tablet-2 ul.products { grid-template-columns: repeat(2, 1fr); }
	body .elementor-grid-tablet-3 ul.products { grid-template-columns: repeat(3, 1fr); }
	body .elementor-grid-tablet-4 ul.products { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
	body .elementor-grid-mobile-1 ul.products { grid-template-columns: 1fr; }
	body .elementor-grid-mobile-2 ul.products { grid-template-columns: repeat(2, 1fr); }
	body .elementor-grid-mobile-3 ul.products { grid-template-columns: repeat(3, 1fr); }
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
/* Woo's own list reset only. Border, radius, background and shadow come from the
 * widget's Box fields; padding, typography and colours from its Card fields
 * (MAR-1595). What is left here is markup mechanics with no field to hold it. */
.woocommerce ul.products li.product {
	width: 100%; margin: 0; float: none; text-align: left;
	overflow: hidden; transition: var(--ekz-transition-card);
}
/* No lift any more: the card's hover is its border turning green, the widget's own
 * Border Color (hover) field (ekz_product_card_settings(), MAR-1634, 2026-09-27). */
.woocommerce ul.products li.product img { object-fit: contain; mix-blend-mode: multiply; }
.woocommerce ul.products li.product .button { margin: var(--ekz-space-12) var(--ekz-space-16) 0; display: inline-block; }
/* Sale badge. Colour, radius and where it sits are the widget's Sale Flash
 * fields. Padding and type have no field there and stay as a named exception —
 * owner: this file. The two zeroed minimums cancel Woo's own 3.236em circle,
 * which would otherwise make the badge round again. */
.woocommerce ul.products li.product .onsale {
	padding: 4px 10px; font-size: 13px; font-weight: 700; line-height: 1.4;
	min-height: 0; min-width: 0;
}
@media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* Stock states: 500-level dot colours, 700-level text. */
.woocommerce .stock.in-stock { color: var(--ekz-stock-in-text); font-weight: var(--ekz-weight-semibold); font-size: 13px; }
.woocommerce .stock.available-on-backorder { color: var(--ekz-stock-transit-text); font-weight: var(--ekz-weight-semibold); font-size: 13px; }
.woocommerce .stock.out-of-stock { color: var(--ekz-stock-out-text); font-weight: var(--ekz-weight-semibold); font-size: 13px; }

/* Woo buttons ignore Elementor's globals in several templates. Same box as every
   other button — 12/24, 15/700 on 1.2 lines, 1px border → 44px (MAR-1634 B01);
   Woo's own line-height 1 and no border made them 39. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
	background: var(--ekz-action-primary); color: #fff; border: 1px solid transparent; border-radius: var(--ekz-radius-button);
	padding: 12px 24px; font-weight: var(--ekz-weight-semibold); font-size: 15px; line-height: 1.2;
	transition: background .16s var(--ekz-ease-standard);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--ekz-action-primary-hover); color: #fff; }
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--ekz-action-primary); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--ekz-action-primary-hover); }

/* Forms in Woo + comments. 11/13 inside the 2px control border: the text and the
   47px field where 12/14 + 1px had them (MAR-1634, 2026-09-27). */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
	padding: 11px 13px; font-size: 15px; line-height: 1.4; color: var(--ekz-text-strong); background: #fff;
	border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-input);
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--ekz-accent); box-shadow: 0 0 0 3px var(--ekz-focus-ring); outline: none; }

/* Notices */
/* A notice is a nested element (radius 6) and its text is the one text colour —
   Woo's own #515151 was a grey (MAR-1634 N01). */
.woocommerce-message { border-top-color: var(--ekz-accent); background: var(--ekz-green-50); border-radius: var(--ekz-radius-sm); color: var(--ekz-text-body); }
/* Woo focuses a notice after an update so a screen reader announces it. It is not
   a control, so it gets no visible focus ring — the ring read as a heavy green
   frame around every "added to cart" message. */
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus { outline: none; }
/* Info and error are the same nested element as the message: radius 6, not the
   card's 12 (MAR-1634 P00). Only the status colour differs. */
.woocommerce-info { border-top-color: var(--ekz-info-500); background: var(--ekz-info-50); border-radius: var(--ekz-radius-sm); }
.woocommerce-error { border-top-color: var(--ekz-danger-500); background: var(--ekz-danger-50); border-radius: var(--ekz-radius-sm); }

/* Result count, ordering, pagination */
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { font-size: var(--ekz-size-body-sm); color: var(--ekz-text-muted); }
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: var(--ekz-gap-tight); display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
	border: 2px solid var(--ekz-border-subtle); border-radius: var(--ekz-radius-sm);
	min-width: 40px; padding: 8px 11px; font-size: var(--ekz-size-body-sm);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ekz-action-primary); color: #fff; border-color: transparent; }

/* Catalogue sidebar */
.e-con-full.ekz-facets { position: sticky; top: var(--ekz-space-24); gap: var(--ekz-gap); }
.e-con-full.ekz-facet { padding-bottom: var(--ekz-space-24); border-bottom: 1px solid var(--ekz-border-subtle); gap: var(--ekz-gap-tight); }
body .ekz-facet__menu .elementor-nav-menu .elementor-item {
	padding: 8px 0; font-size: var(--ekz-size-body-sm); font-weight: var(--ekz-weight-regular);
	color: var(--ekz-text-body); text-transform: none; letter-spacing: 0; font-family: var(--ekz-font-body);
}
body .ekz-facet__menu .elementor-nav-menu .elementor-item:hover,
body .ekz-facet__menu .elementor-nav-menu .elementor-item.elementor-item-active { color: var(--ekz-text-accent); font-weight: var(--ekz-weight-semibold); }
.e-con-full.ekz-note { background: var(--ekz-green-50); border: 2px solid var(--ekz-green-100); border-radius: var(--ekz-radius-card); padding: var(--ekz-space-16); border-bottom: 2px solid var(--ekz-green-100); gap: var(--ekz-gap-tight); }

/* Single product */
.ekz-product__gallery .woocommerce-product-gallery { border: 2px solid var(--ekz-border-subtle); border-radius: var(--ekz-radius-card); overflow: hidden; background: #fff; }
/* Woo's `div.images { margin-bottom: 2em }` (0,3,2): on a phone the columns stack
   and it put 30 between the photo and the summary on top of the 24 gap (MAR-1634). */
body div.ekz-product__gallery div.woocommerce-product-gallery.images { margin: 0; }
.ekz-product__gallery .woocommerce-product-gallery__image img { object-fit: contain; background: #fff; }
/* Quantity field: see the stepper block in section 24. */
/* 24 · line · 24, like the checkout's tail: the summary's gap above the line and
   the same 24 below it (was 16, MAR-1634 P01). */
body .ekz-productmeta .product_meta { font-size: var(--ekz-size-body-sm); color: var(--ekz-text-muted); border-top: 1px solid var(--ekz-border-subtle); padding-top: var(--ekz-gap); }
.ekz-tabs .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--ekz-border-subtle); padding: 0; margin: 0 0 var(--ekz-space-24); }
.ekz-tabs .woocommerce-tabs ul.tabs::before { border: 0; }
.ekz-tabs .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 0; margin: 0 var(--ekz-space-24) 0 0; padding: 0; }
.ekz-tabs .woocommerce-tabs ul.tabs li::before, .ekz-tabs .woocommerce-tabs ul.tabs li::after { content: none; }
.ekz-tabs .woocommerce-tabs ul.tabs li a { padding: var(--ekz-space-12) 0; font-size: var(--ekz-size-body-sm); font-weight: var(--ekz-weight-semibold); color: var(--ekz-text-muted); }
.ekz-tabs .woocommerce-tabs ul.tabs li.active a { color: var(--ekz-text-strong); box-shadow: inset 0 -2px 0 var(--ekz-accent); }

/* Cart/checkout/account blocks — styled, not rebuilt. */
.wc-block-components-button:not(.is-link) {
	background: var(--ekz-action-primary); color: #fff; border-radius: var(--ekz-radius-button);
	font-size: 15px; font-weight: var(--ekz-weight-semibold);
}
.wc-block-components-button:not(.is-link):hover { background: var(--ekz-action-primary-hover); }
.wc-block-components-text-input input, .wc-block-components-textarea, .wc-block-components-select select {
	border-radius: var(--ekz-radius-input); border: 2px solid var(--ekz-border-default); font-size: 15px;
}
.wc-block-components-panel, .wc-block-components-sidebar .wc-block-components-totals-wrapper { border-color: var(--ekz-border-subtle); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ekz-gap-tight); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 14px; border-radius: var(--ekz-radius-sm); font-size: var(--ekz-size-body-sm); color: var(--ekz-text-body); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--ekz-green-50); color: var(--ekz-text-accent); font-weight: var(--ekz-weight-semibold); }

/* ============ 17. Blog, 404, search ====================================== */

.ekz-postgrid article.elementor-post {
	position: relative;
	border: 2px solid var(--ekz-border-subtle); border-radius: var(--ekz-radius-card);
	background: #fff; box-shadow: var(--ekz-shadow-1); overflow: hidden; transition: var(--ekz-transition-card);
}
/* The whole result is the link (MAR-1634 L01 + MAR-1635 Q06). The card lifted like
   a clickable card while only its title answered a click, and the title itself had
   no hover. The title's link now covers the card; picture and "read more" go to
   the same place. Inside a clickable card the card answers hover, not its text. */
.ekz-postgrid .elementor-post__title a::after { content: ""; position: absolute; inset: 0; }
.ekz-postgrid article.elementor-post:hover { border-color: var(--ekz-accent); }
body .ekz-postgrid .elementor-post__title, body .ekz-postgrid .elementor-post__title a {
	font-family: var(--ekz-font-heading); font-size: 19px; line-height: 1.32; font-weight: var(--ekz-weight-semibold);
	color: var(--ekz-text-strong); text-transform: none; letter-spacing: 0;
}
body .ekz-postgrid .elementor-post__excerpt p { font-size: 15px; line-height: 1.6; color: var(--ekz-text-body); }
body .ekz-postgrid .elementor-post__read-more { font-size: 15px; font-weight: var(--ekz-weight-semibold); color: var(--ekz-text-accent); }
body .ekz-postgrid .elementor-post__meta-data { font-size: 13px; color: var(--ekz-text-faint); }

/* On the 24/12 scale (MAR-1634; were 40/12 and 32/10): a heading sits 12 above
   its text and further from the text before it — 48 for a section (h2), 24 for
   a subheading (h3, e.g. "Vlastnosti" in a product description). */
.ekz-prose h2 { font-size: var(--ekz-size-h3); margin: var(--ekz-space-48) 0 var(--ekz-gap-tight); }
.ekz-prose h3 { font-size: var(--ekz-size-h4); margin: var(--ekz-gap) 0 var(--ekz-gap-tight); }
/* A text that opens with a heading (a datasheet description with no intro) must
   not add that heading's top margin to the section gap above it: inside a widget
   margins do not collapse. */
.ekz-prose :is(h2, h3):first-child { margin-top: 0; }
.ekz-prose p, .ekz-prose li { font-size: var(--ekz-size-body); line-height: var(--ekz-lh-body); }
.ekz-prose img { border-radius: var(--ekz-radius-image); }
.ekz-prose blockquote { border-left: 3px solid var(--ekz-accent); padding-left: var(--ekz-space-20); margin-inline: 0; color: var(--ekz-text-body); }

.e-con.ekz-404 > .e-con-inner { align-items: flex-start; max-width: var(--ekz-container-narrow); }
body .elementor-widget.ekz-404__search .elementor-search-form__container { max-width: 420px; }
body .elementor-widget-search-form input[type="search"].elementor-search-form__input {
	font-family: var(--ekz-font-body); font-size: 15px; font-weight: var(--ekz-weight-regular); text-transform: none; letter-spacing: 0;
}

/* Draft banner on legal pages — loud on purpose. */
.ekz-draft {
	border: 2px solid var(--ekz-warning-500); background: var(--ekz-warning-50);
	color: var(--ekz-warning-700); border-radius: var(--ekz-radius-card);
	padding: var(--ekz-space-16) var(--ekz-space-20); font-size: var(--ekz-size-body-sm);
	line-height: var(--ekz-lh-body); margin-bottom: var(--ekz-space-12);
}
.ekz-meta-note, .ekz-meta-note p { color: var(--ekz-text-faint); font-size: 13px; }

/* ============ 18. Images ================================================= */

.elementor-widget-image img, .elementor-widget-theme-post-featured-image img { border-radius: var(--ekz-radius-image); }
.ekz-card .elementor-widget-image img, .ekz-servicecard .elementor-widget-image img,
.ekz-projectcard .elementor-widget-image img, .ekz-cattile .elementor-widget-image img { border-radius: 0; }
.ekz-cattile .elementor-widget-image img { border-radius: var(--ekz-radius-sm); }
.ekz-about__photo .elementor-widget-image img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }

/* Icon lists (generic, outside header/footer) */
body .elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text,
body .elementor-widget-icon-list .elementor-icon-list-item > a {
	font-family: var(--ekz-font-body); font-size: var(--ekz-size-body-sm);
	font-weight: var(--ekz-weight-regular); line-height: var(--ekz-lh-body);
	letter-spacing: 0; text-transform: none; color: var(--ekz-text-body);
}
/* A linked item puts its text in a span inside the <a>, and Elementor colours
   that span with Global Secondary (#14181B) — the phone number on Kontakt was
   near-black. The span takes its link's colour; kept at low specificity so the
   footer's and the top bar's own colours still win there. */
.elementor-icon-list-item > a > .elementor-icon-list-text { color: inherit; }
body .elementor-widget-icon-list .elementor-icon-list-icon svg,
body .elementor-widget-icon-list .elementor-icon-list-icon i { color: var(--ekz-accent); fill: var(--ekz-accent); width: 15px; height: 15px; }

/* Numbered steps ("Ako to prebieha" on Cenová ponuka and Pre firmy): a plain <ol>
   in a text widget, numbered by the browser, so the list the assistant edits is the
   list that shows and a new step renumbers itself. The number is the green of the
   other figures (Q02); rows 12 apart (MAR-1634). */
body .ekz-steps ol { margin: 0; padding-left: var(--ekz-space-24); display: grid; gap: var(--ekz-gap-tight); }
body .ekz-steps li { margin: 0; padding-left: 4px; }
body .ekz-steps li::marker { color: var(--ekz-text-accent); font-weight: var(--ekz-weight-bold); }

/* ============ 19. Mobile header (bundle compact mode) ==================== */
/* compact: topbar hidden, logo 32, icon buttons right, gap 14. */

@media (max-width: 1024px) {
	.e-con.ekz-topbar { display: none; }
	.e-con.ekz-headerbar > .e-con-inner { min-height: 64px; }
	/* The letters of the former 32px box (cropped file, MAR-1634). */
	.ekz-header__logo img { height: 21px; }
	.e-con-full.ekz-header__nav { flex: 0 0 44px; width: 44px; order: 3; }
	/* The Menu widget's burger, its list and the Eshop accordion are its own
	   fields (MAR-2492); the Nav Menu rules that sized and placed them are gone. */
	.e-con-full.ekz-header__actions { order: 2; }
	/* The search field is hidden from tablet down by its own Responsive field; an
	   icon button opens the same search under the header (10-header.php). */
}

/* ============ 20. Accessibility + misc =================================== */

.skip-link:focus { background: var(--ekz-ink-900); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--ekz-radius-sm) 0; z-index: var(--ekz-z-modal); }
.e-con > .e-con-inner > .elementor-widget:empty { display: none; }

/* ============ 21. WooCommerce x Elementor specificity counter-layer ======= */
/*
 * Section 16 above is the design layer; this section is what makes it apply.
 *
 * Every Elementor WooCommerce widget binds its typography and colour controls to
 * the kit's Global slots, and Elementor writes that binding into the template's
 * generated stylesheet (post-133.css for the archive, post-134.css for the single
 * product) at (0,5,2)-(0,6,3):
 *
 *   .elementor-widget-woocommerce-archive-products.elementor-wc-products
 *     ul.products li.product .woocommerce-loop-product__title { ... }
 *
 * That file loads after the theme, so section 16's (0,4,2) selectors lost and every
 * product card rendered its title and price as the Global "Primary" heading - 76px
 * in accent green, on the shop archive and in Related Products alike.
 *
 * The ladder here is `.elementor-widget.elementor-widget`: the class sits on every
 * Elementor widget wrapper, and repeating it in the selector adds one class to the
 * specificity count without changing what it matches. That puts these rules one
 * step above Elementor's, whichever Woo products widget emitted them - archive,
 * related, upsells, cross-sells - with no !important and no per-widget selector
 * list to keep in sync.
 *
 * Values are the bundle's ProductCard/PriceBlock, not new design decisions:
 * title 15/1.4 600 core on text-strong - price 22/1.15 700 heading wdth 104 on
 * price-main - net line 13/1.4 400 body on price-secondary.
 */

/*
 * MAR-1595 — the card's own ladder is GONE, deliberately.
 *
 * Title, price, the struck-out old price and the net line used to be fought for
 * here, because Elementor's generated CSS was winning with values nobody chose.
 * They are now chosen: Title Color / Title Typography / Price Color / Price
 * Typography are fields on the Archive Products widget, and the net line has a
 * pair of its own in "Karta produktu — vzhľad". Elementor generating those rules
 * is the point, so a rule that outranks it would be the bug.
 *
 * The loop's Read more / Select options button had rules here too. It has not
 * rendered since inc/shop-loop.php removed woocommerce_template_loop_add_to_cart
 * — the card carries .ekz-card__cart instead — so those rules styled nothing.
 */

/* Related / upsell heading - SectionHead H3, not a Global heading. */
body.woocommerce .elementor-widget.elementor-widget .products > h2,
body.woocommerce .elementor-widget.elementor-widget .related-products > h2,
body.woocommerce .elementor-widget.elementor-widget .upsells > h2,
body.woocommerce .elementor-widget.elementor-widget .cross-sells > h2 {
	font-family: var(--ekz-font-heading); font-size: var(--ekz-size-h3); line-height: var(--ekz-lh-heading);
	font-weight: var(--ekz-weight-bold);
	color: var(--ekz-text-strong); margin: 0 0 var(--ekz-space-24);
}

/* Empty-result copy reads as body text, not as a Global colour. */
body .elementor-widget.elementor-widget .elementor-products-nothing-found {
	font-family: var(--ekz-font-body); font-size: var(--ekz-size-body);
	color: var(--ekz-text-muted);
}

/* Card internals: spacing is the widget's "Bočný odstup obsahu" / "Medzera medzi
 * riadkami" pair now, so only the image reset is left. */
body .elementor-widget.elementor-widget ul.products li.product a img { margin: 0; }

/* Layered nav + price filter: Woo ships a purple jQuery-UI slider. */
body.woocommerce .price_slider_wrapper .ui-slider { background: var(--ekz-ink-100); border-radius: var(--ekz-radius-pill); height: 4px; }
body.woocommerce .price_slider_wrapper .ui-slider .ui-slider-range { background: var(--ekz-action-primary); }
body.woocommerce .price_slider_wrapper .ui-slider .ui-slider-handle {
	background: var(--ekz-white); border: 2px solid var(--ekz-action-primary);
	width: 16px; height: 16px; top: -6px; box-shadow: var(--ekz-shadow-1);
}
body.woocommerce .widget_price_filter .price_slider_amount .price_label { font-size: var(--ekz-size-body-sm); color: var(--ekz-text-muted); }
body.woocommerce .widget_price_filter .price_slider_amount .button {
	background: var(--ekz-action-primary); color: #fff; border-radius: var(--ekz-radius-button);
	font-size: 13px; font-weight: var(--ekz-weight-semibold); padding: 8px 16px;
}

/* Product meta values read in the text colour; the rows are laid out further
   down ("Product meta: …"), in one place. */
body .ekz-productmeta .product_meta .sku_wrapper .sku,
body .ekz-productmeta .product_meta a { color: var(--ekz-text-body); }
/* A text-coloured link steps to green, like the breadcrumb and the cart's item
   names; it had no hover at all (MAR-1634 L01). The widget has a Link colour
   field but no hover field. */
body .ekz-productmeta .product_meta a:hover { color: var(--ekz-text-accent); }

/* Variation form: bundle Select, with a label column that lines up with it. */
/* margin 0 at (0,4,4): Woo's `.woocommerce div.product form.cart .variations
   { margin-bottom: 1em }` (0,4,2) beat the old 16 here and left 13.5 under the
   table. Rows are 12 apart through the table's gap (section 25), so the last row
   carries no margin into the form's 24 (MAR-1634). */
body div.ekz-addtocart.ekz-addtocart form.cart table.variations { border: 0; margin: 0; }
body .ekz-addtocart table.variations tr { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--ekz-gap); margin-bottom: 0; }
body .ekz-addtocart table.variations th, body .ekz-addtocart table.variations td { border: 0; padding: 0; background: transparent; }
body .ekz-addtocart table.variations th label {
	font-family: var(--ekz-font-core); font-size: var(--ekz-size-body-sm);
	font-weight: var(--ekz-weight-semibold); color: var(--ekz-text-strong);
}
body .ekz-addtocart table.variations select {
	width: 100%; appearance: none; padding: 12px 40px 12px 16px;
	font-family: var(--ekz-font-body); font-size: 15px; line-height: 1.4;
	color: var(--ekz-text-strong); background: var(--ekz-white);
	border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-input);
	cursor: pointer;
}
body .ekz-addtocart table.variations select:focus { border-color: var(--ekz-action-primary); box-shadow: var(--ekz-shadow-focus); outline: none; }
body .ekz-addtocart .reset_variations { font-size: var(--ekz-size-body-sm); }
body .ekz-addtocart .woocommerce-variation-price .price { font-size: 28px; }

/* A disabled add-to-cart must read as disabled, not as a second brand colour. */
body.woocommerce button.button.disabled,
body.woocommerce button.button:disabled[disabled] {
	background: var(--ekz-action-disabled); color: var(--ekz-action-disabled-text); opacity: 1;
}

/* Woo's own button palette is purple, and it ships behind `:where()` — which
 * contributes no specificity, so the whole rule sits at (0,3,1) and section 16's
 * (0,3,1) only tied with it. `body.woocommerce` adds the element that breaks the
 * tie in our favour. `.alt` is the add-to-cart / place-order button. */
body.woocommerce a.button.alt,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt {
	background: var(--ekz-action-primary); color: #fff;
}
body.woocommerce a.button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce input.button.alt:hover {
	background: var(--ekz-action-primary-hover); color: #fff;
}
body.woocommerce button.button.alt.disabled,
body.woocommerce button.button.alt:disabled[disabled],
body.woocommerce button.button.alt.disabled:hover {
	background: var(--ekz-action-disabled); color: var(--ekz-action-disabled-text); opacity: 1; cursor: not-allowed;
}

/* Tab strip: Woo draws the active tab as a raised chip at (0,5,3). */
body.woocommerce .ekz-tabs.elementor-widget .woocommerce-tabs ul.tabs li,
body.woocommerce .ekz-tabs.elementor-widget .woocommerce-tabs ul.tabs li.active {
	background: transparent; border: 0; border-radius: 0; box-shadow: none;
	margin: 0 var(--ekz-space-24) 0 0; padding: 0;
}
body.woocommerce .ekz-tabs.elementor-widget .woocommerce-tabs ul.tabs li.active a { color: var(--ekz-text-strong); box-shadow: inset 0 -2px 0 var(--ekz-accent); }
body.woocommerce .ekz-tabs.elementor-widget .woocommerce-tabs .woocommerce-Tabs-panel > h2 {
	font-family: var(--ekz-font-heading); font-size: var(--ekz-size-h4); font-weight: var(--ekz-weight-bold);
	color: var(--ekz-text-strong); margin: 0 0 var(--ekz-space-12);
}

/* Product meta: Elementor's separator between SKU and Categories comes from a
 * control default that a postmeta-written document never materialises, so the
 * two ran together as "SKU S773Categories". One row per detail instead. */
/* Every direct child is its own row, 12 apart (MAR-1634 P01; the 6 was off the
 * 24/12 scale). The brand row now has the same label/value markup as Kód and
 * Kategória (inc/shop-single.php, woocommerce_product_brands_output), so its
 * label takes the same 96px column instead of running into its value. */
body .ekz-productmeta .product_meta { display: grid; row-gap: var(--ekz-gap-tight); }
body .ekz-productmeta .product_meta > span { display: block; margin: 0; }
body .ekz-productmeta .product_meta .detail-container::after { content: none; }
body .ekz-productmeta .product_meta .detail-label {
	display: inline-block; min-width: 96px;
	font-family: var(--ekz-font-core); font-weight: var(--ekz-weight-semibold);
	color: var(--ekz-text-strong);
}

/* ============ 22. Product card — mechanics only ========================== */
/*
 * MAR-1595. Every NUMBER, COLOUR and TYPEFACE that used to live in this section
 * is now a field on the Archive Products widget: section "Karta produktu —
 * vzhľad" for the parts our Woo hooks draw, and Elementor's own Products / Box
 * sections for the image, title, price and card chrome. The mapping and the
 * things that still cannot be edited are in inc/widget-product-card-controls.php.
 *
 * What survives here is markup mechanics — how the boxes are arranged, not how
 * big or what colour they are. A value in this section from now on is a bug
 * unless it is a named exception, because it would silently outrank the field an
 * assistant just changed: our `body .elementor-widget.elementor-widget` ladder
 * scores (0,4,3) against Elementor's (0,4,2).
 */

/* Elementor's grid pins the card's display to --button-align-display at (0,4,2),
 * so the flex column that bottom-aligns the price row needs the widget ladder. */
body .elementor-widget.elementor-widget ul.products li.product,
body .woocommerce ul.products li.product {
	display: flex; flex-direction: column;
}
body .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { display: block; text-decoration: none; }

/* The plate is positioned so the swatch row can sit on its bottom edge; padding,
 * background and the photo's height are fields. */
body .ekz-card__photo { position: relative; }
body .woocommerce ul.products li.product .ekz-card__photo img {
	/* No `aspect-ratio: auto` here any more — the card's own "Pomer strán fotky"
	   field sets it, and a shorthand reset in the stylesheet would beat the
	   field on half the cards depending on which sheet loaded last (MAR-1623). */
	width: 100%; object-fit: contain; display: block;
	mix-blend-mode: multiply; padding: 0; margin: 0;
}

/* No hairline under the plate — the swatch row sitting on its bottom edge is the
 * divider now (Maros 2026-09-04). */
body .ekz-card__meta {
	display: flex; align-items: center; justify-content: space-between; gap: var(--ekz-gap-tight);
}

/* Two lines tall whatever the name's length, so every card's stock line and
 * price row land on one baseline across a row. The clamp and the reserved height
 * are the "Počet riadkov názvu" field; the box model is mechanics. */
body .elementor-widget.elementor-widget ul.products li.product .woocommerce-loop-product__title,
body .woocommerce ul.products li.product .woocommerce-loop-product__title {
	border-top: 0; margin: 0; box-sizing: content-box; min-height: 0;
}

/* Swatch row laid over the bottom of the photo plate — absolute, so the card's
 * height is the same whether a product has one colour or six. Centred: five
 * tiles fill the row, fewer — or five at the maximum size — sit in its middle
 * (Maroš, MAR-1634, 2026-09-27). */
body .ekz-card__swatches {
	position: absolute; bottom: 0;
	display: flex; align-items: center; justify-content: center; padding: 0; z-index: 1;
}

/* The tile's size follows the card (Maroš, MAR-1634, 2026-09-27): "Najviac
 * náhľadov" tiles share the row — the card's width (100cqi, the card is the
 * query container) less the plate's two side insets and the gaps — bounded by the
 * card widget's "Najmenšie / Najväčšie políčko" fields. The fields write the
 * variables; this is the arithmetic no single field can hold. Measured: 48 at
 * 1440 and 1920 (three cards), 40 at 1280, 31 at 1100, 27 at 1025 (the narrowest
 * card); 48 centred on two-card tablets and one-card phones (46 at 360).
 * The same size is the plate's bottom inset, so a tile never covers the photo. */
body .elementor-widget.elementor-widget ul.products li.product,
body .woocommerce ul.products li.product {
	container-type: inline-size;
	--ekz-sw: clamp(
		var(--ekz-sw-min, 24px),
		(100cqi - 2 * var(--ekz-card-pad, 24px) - (var(--ekz-sw-count, 5) - 1) * var(--ekz-sw-gap, 8px)) / var(--ekz-sw-count, 5),
		var(--ekz-sw-max, 48px)
	);
}
/* Phones (one card per row): no query container. With `container-type` on the
 * card, the browser measured the product widget inside its flex column from a
 * zero-width card — square photo plate 0 tall — so the widget came out ~3 500px
 * shorter than its own grid and the footer was drawn over the last products
 * (Maroš, iPhone, 2026-10-17; reproduced in Chromium at 390: widget 4 301 vs
 * grid 7 851). One card spans the column, so its width is the viewport less the
 * page gutters: the same tile size from the same arithmetic, without 100cqi. */
@media (max-width: 767px) {
	body .elementor-widget.elementor-widget ul.products li.product,
	body .woocommerce ul.products li.product {
		container-type: normal;
		--ekz-sw: clamp(
			var(--ekz-sw-min, 24px),
			(100vw - 2 * var(--ekz-gutter) - 2 * var(--ekz-card-pad, 24px) - (var(--ekz-sw-count, 5) - 1) * var(--ekz-sw-gap, 8px)) / var(--ekz-sw-count, 5),
			var(--ekz-sw-max, 48px)
		);
	}
}
body .ekz-card__swatch { width: var(--ekz-sw); height: var(--ekz-sw); }
body .woocommerce ul.products li.product .ekz-card__photo,
body .elementor-widget.elementor-widget ul.products li.product .ekz-card__photo { padding-bottom: var(--ekz-sw); }
body .ekz-card__swatch,
body .ekz-card__swatch:hover, body .ekz-card__swatch:focus, body .ekz-card__swatch:active {
	padding: 0; margin: 0; border-style: solid; border-width: 2px; /* one control border, 2px (MAR-1634, 2026-09-27) */
	/* No shadow: the brief has one, the card's (B6). The 0 1px 2px "whisper" the
	 * tile wore was a second one — invisible to the audit while tiles were 40px
	 * and it only checked boxes over 40 (MAR-1634, 2026-09-27). The border
	 * separates the tile from the plate. */
	box-shadow: none;
	background: var(--ekz-white) center / contain no-repeat;
	flex: 0 0 auto; cursor: pointer;
}
body .ekz-card__swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ekz-action-primary); }
/* "+N" takes the last tile's place: same box, text instead of a photo. Its type
 * is the brand/code pair's field, so the card's small print stays one thing. */
body .ekz-card__swatch-more {
	display: inline-flex; align-items: center; justify-content: center;
}

body .ekz-stockbadge { display: inline-flex; align-items: center; gap: var(--ekz-gap-tight); }
body .ekz-stockbadge i { border-radius: var(--ekz-radius-pill); flex: 0 0 auto; }

body .ekz-card__foot {
	margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between;
	gap: var(--ekz-gap-tight); flex-wrap: wrap;
}
/* No gap inside the price block: the gross price and its "bez DPH" line sit
   together (Maroš, MAR-1634, 2026-09-27 — the design-system layer's 12 between
   them; the product page keeps its own). */
body .elementor-widget.elementor-widget ul.products li.product .ekz-card__foot .price,
body .woocommerce ul.products li.product .ekz-card__foot .price { margin: 0; padding: 0; gap: 0; }

body .ekz-card__cart {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	transition: var(--ekz-transition-color);
}
body .ekz-card__cart.is-disabled { pointer-events: none; }

/* Woo's own "added to cart" link would break the two-column foot. */
body .woocommerce ul.products li.product .added_to_cart { display: none; }

/* Full-width notice strip: above the gallery/summary split on the product page,
 * under the page head on the catalogue (MAR-1634 P00 — in the products column a
 * notice pushed the first card 126px below the top of the filter panel). The
 * container is always in the DOM; it only takes space when WooCommerce has
 * something to say. */
body .ekz-product__notices,
body .ekz-notices-row { padding-top: 0; padding-bottom: 0; }
/* MAR-1634: 24 under the notices is the only space there (on the cart, its
   grid's gap), and none when there is nothing to say. Elementor's Notices widget
   prints the notices in its own .e-woocommerce-notices-wrapper and puts Woo's
   .woocommerce-notices-wrapper inside it, holding only whitespace — not :empty,
   which is how the old `:not(:empty) { margin-bottom: 24 }` could give an empty
   row 24. So the 24 goes to Elementor's wrapper only while it holds a real
   notice. Woo gives every notice `margin: 0 0 2em` (30), which out-collapsed the
   24: notice → catalogue measured 30. Notices stack 12 apart. */
body :is(.ekz-notices-row, .ekz-product__notices) .e-woocommerce-notices-wrapper:has(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	display: flex; flex-direction: column; gap: var(--ekz-gap-tight); margin-bottom: var(--ekz-gap);
}
/* On the product page the strip follows the breadcrumb directly: the notice's top edge touched the
   breadcrumb text (0 px between them, night check 2026-10-18). 16 above it, only with a notice. */
body .ekz-product__notices .e-woocommerce-notices-wrapper:has(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	margin-top: var(--ekz-space-16);
}
body :is(.ekz-notices-row, .ekz-product__notices) .woocommerce-notices-wrapper:has(> *),
body .ekz-cart.ekz-cart .woocommerce-notices-wrapper:has(> *) { display: flex; flex-direction: column; gap: var(--ekz-gap-tight); }
body :is(.ekz-notices-row, .ekz-product__notices, .ekz-cart.ekz-cart) :is(.woocommerce-notices-wrapper, .e-woocommerce-notices-wrapper) > * { margin: 0; }
/* Woo's whitespace-only wrapper sits INSIDE Elementor's, after the notices: as a
   flex item it took one more 12 gap (notice → catalogue 36). No element, no box. */
body :is(.ekz-notices-row, .ekz-product__notices) .woocommerce-notices-wrapper:not(:has(> *)) { display: none; }

/* ============ 23. Variation picker (bundle ColorSwatches + SizeSelector) == */
/*
 * The <select> stays in the DOM and authoritative — see ekz-variations.js. It is
 * hidden visually rather than removed so keyboard and no-JS users keep a working
 * control, and so WooCommerce can still write to it.
 */

body .ekz-varpick-host select {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body .ekz-addtocart table.variations tr { grid-template-columns: 1fr; gap: var(--ekz-gap-tight); }
body .ekz-addtocart table.variations th label {
	display: flex; align-items: baseline; gap: 0;
	font: var(--ekz-weight-semibold) var(--ekz-size-body-sm)/1.4 var(--ekz-font-core); color: var(--ekz-text-strong);
}
body .ekz-varpick__value { font-weight: var(--ekz-weight-regular); color: var(--ekz-text-body); }

body .ekz-varpick { display: flex; flex-wrap: wrap; gap: var(--ekz-gap-tight); }

/* Active state is Maros's spec (2026-09-04): 48px tile, photo contained, radius-sm,
 * the control border (2px since 2026-09-27, was a hairline), 2px primary ring
 * outside it. Inactive is the same tile without the ring;
 * hover darkens the border so the tile reads as clickable. */
body .ekz-swatch {
	width: 48px; height: 48px; padding: 0; cursor: pointer;
	border-radius: var(--ekz-radius-sm); border: 2px solid var(--ekz-border-default);
	background: var(--ekz-white) center / contain no-repeat;
	/* No resting ring (a zero ring still counted as a shadow); `none` interpolates
	   to the active ring just the same. */
	box-shadow: none;
	transition: box-shadow var(--ekz-duration-fast) var(--ekz-ease-standard), border-color var(--ekz-duration-fast) var(--ekz-ease-standard);
}
/* Choice controls answer hover with the green border (MAR-1635 Q07) — the grey
   border-strong was a third grey. */
body .ekz-swatch:hover { border-color: var(--ekz-accent); }
body .ekz-swatch.is-textual { font: var(--ekz-weight-semibold) 12px/1 var(--ekz-font-core); color: var(--ekz-text-body); text-transform: uppercase; }
body .ekz-swatch.is-active { border-color: var(--ekz-border-default); box-shadow: 0 0 0 2px var(--ekz-action-primary); }
body .ekz-swatch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ekz-focus-ring); }

body .ekz-chip {
	min-width: 48px; padding: 10px 10px; cursor: pointer;
	font: var(--ekz-weight-semibold) var(--ekz-size-body-sm)/1 var(--ekz-font-core);
	color: var(--ekz-text-strong); background: var(--ekz-white);
	border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-sm);
	transition: var(--ekz-transition-color), box-shadow var(--ekz-duration-fast) var(--ekz-ease-standard);
}
body .ekz-chip:hover { border-color: var(--ekz-accent); }
/* The 2px border is the whole selected mark now; the 1px inset that doubled
   the old hairline would make it 3 (MAR-1634, 2026-09-27). */
body .ekz-chip.is-active { border-color: var(--ekz-action-primary); color: var(--ekz-text-accent); }
body .ekz-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ekz-focus-ring); }

/* Trousers sized by the waist (MAR-2705): the EU size under the number, "32" over
 * "EU 46", from Portwest's size guide (inc/size-eu.php). Chips in a row stretch to
 * the tallest one, so a waist the guide has no EU size for keeps the same height. */
body .ekz-chip--eu { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 10px; }
body .ekz-chip__eu { font: var(--ekz-weight-medium) 11px/1 var(--ekz-font-body); color: var(--ekz-text-muted); white-space: nowrap; }
body .ekz-chip__eu:empty { display: none; }
body .ekz-chip.is-active .ekz-chip__eu { color: inherit; }

/* Elementor's add-to-cart widget spaces every non-first button with
 * --button-spacing (10px). The buy box lays its row out with its own gap, so
 * the extra margin only pushed the button off the grid. Zeroed through the
 * variable so the widget's own rule stays intact. */
body .ekz-addtocart { --button-spacing: 0px; }

/* Elementor's kit styles `button:hover, button:focus` (background = Global
 * accent) at (0,2,1) and loads after this file, so a freshly clicked chip
 * flashed magenta. One more class in the chain outranks it; the tile's own
 * background is restated for every interactive state. */
body .ekz-addtocart .ekz-chip:hover, body .ekz-addtocart .ekz-chip:focus, body .ekz-addtocart .ekz-chip.is-active,
body .ekz-addtocart .ekz-chip:active { background-color: var(--ekz-white); color: var(--ekz-text-strong); }
body .ekz-addtocart .ekz-chip.is-active { color: var(--ekz-text-accent); }
body .ekz-addtocart .ekz-swatch:hover, body .ekz-addtocart .ekz-swatch:focus, body .ekz-addtocart .ekz-swatch:active { background-color: var(--ekz-white); color: var(--ekz-text-body); }

/* WooCommerce prints the "Vymazať" reset link inside the last attribute cell,
 * before the buttons this script appends — it ended up between the label and
 * the chips. Flex order moves it under them without touching Woo's markup. */
body .ekz-varpick-host { display: flex; flex-direction: column; gap: var(--ekz-gap-tight); }
body .ekz-varpick-host .reset_variations { order: 2; align-self: flex-start; }

/* A combination WooCommerce has ruled out reads as ruled out, not as missing:
 * a red cross over the tile or chip (Maroš, MAR-2488, 2026-10-16 — "aby zákazník
 * hneď vedel"). It was opacity .4 alone, which faded a pale glove into the white.
 * A white veil dims the photo instead of the whole control, so the cross itself
 * stays at full strength. The red is the kit's "Danger (dot/border)" global —
 * change it in Site Settings and the cross follows; these tiles are built by
 * ekz-variations.js over Woo's select, so no widget field can reach them. */
body .ekz-chip.is-unavailable, body .ekz-swatch.is-unavailable { position: relative; cursor: not-allowed; }
body .ekz-chip.is-unavailable:hover, body .ekz-swatch.is-unavailable:hover { border-color: var(--ekz-border-default); }
body .ekz-chip.is-unavailable::before, body .ekz-swatch.is-unavailable::before {
	content: ''; position: absolute; inset: 0; border-radius: inherit;
	background: rgba(255, 255, 255, .55); pointer-events: none;
}
body .ekz-chip.is-unavailable::after, body .ekz-swatch.is-unavailable::after {
	--ekz-x: var(--e-global-color-ekzdang, var(--ekz-danger-500));
	content: ''; position: absolute; inset: 6px; pointer-events: none;
	background:
		linear-gradient(to top right, transparent calc(50% - 1px), var(--ekz-x) calc(50% - 1px), var(--ekz-x) calc(50% + 1px), transparent calc(50% + 1px)),
		linear-gradient(to bottom right, transparent calc(50% - 1px), var(--ekz-x) calc(50% - 1px), var(--ekz-x) calc(50% + 1px), transparent calc(50% + 1px));
}

/* Sold out, but the combination exists (MAR-2680): one red stroke under the same
 * veil instead of the cross, and still clickable — choosing it shows Woo's
 * "Vypredané — očakávané naskladnenie …" line while the cart button stays off.
 * Same "Danger (dot/border)" global as the cross (Maroš, 2026-10-21). */
body .ekz-chip.is-soldout, body .ekz-swatch.is-soldout { position: relative; }
body .ekz-chip.is-soldout::before, body .ekz-swatch.is-soldout::before {
	content: ''; position: absolute; inset: 0; border-radius: inherit;
	background: rgba(255, 255, 255, .55); pointer-events: none;
}
body .ekz-chip.is-soldout::after, body .ekz-swatch.is-soldout::after {
	--ekz-x: var(--e-global-color-ekzdang, var(--ekz-danger-500));
	content: ''; position: absolute; inset: 6px; pointer-events: none;
	background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ekz-x) calc(50% - 1px), var(--ekz-x) calc(50% + 1px), transparent calc(50% + 1px));
}

/* ============ 24. Single product extras ================================== */

/* Product page rhythm (MAR-1634 produkt-medzery): the summary column's gap (24)
   is the only space between its blocks. The overline's 10, the trust row's 20,
   the certification's 8 and the documents' 4 each added to it. A divider line
   has the 24 gap above it and 24 below it, as in the product meta. */
body .ekz-product__overline {
	font: var(--ekz-weight-semibold) 12px/1 var(--ekz-font-core);
 text-transform: uppercase;
	color: var(--ekz-text-faint); margin-bottom: 0;
}

/* Reassurance row: container + Icon List fields since MAR-2487 (22-shop.php). */

/* Stock line on the detail page uses the same badge grammar as the card. */
body .ekz-stock .stock { display: inline-flex; align-items: center; gap: var(--ekz-gap-tight); font: var(--ekz-weight-semibold) 13px/1.3 var(--ekz-font-core); }
body .ekz-stock .stock::before { content: ''; width: 7px; height: 7px; border-radius: var(--ekz-radius-pill); background: currentColor; flex: 0 0 auto; }

/* No phone variant of the card foot: price left, cart button right, as on the
 * desktop — one card per row leaves room for both (Maroš, 2026-10-17). */

/* Buy box: quantity stepper + a primary action wide enough to read as the one
 * thing to do on the page (bundle ProductPage). */
/* Rows 24 apart (the variation pickers → quantity and button), the quantity and
   the button 12 apart on their row (MAR-1634). */
body .ekz-addtocart form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--ekz-gap) var(--ekz-gap-tight); }
/* Woo's clearfix on form.cart (::before/::after, content " ") is two more flex
   items; each wrapped to a line of its own and added a gap — 12 above the first
   picker and 12 under the button. (0,3,4) over Woo's (0,3,3). */
body div.ekz-addtocart.ekz-addtocart form.cart::before,
body div.ekz-addtocart.ekz-addtocart form.cart::after { content: none; }
/* WooCommerce gives the stepper `margin: 0 4px 0 0` at (0,4,3); this one scored
   (0,3,2) and lost, which showed once the button moved beside it: 12 + 4 = 16
   (MAR-1634, 2026-09-27). Same specificity now, and later in the cascade. */
body .ekz-addtocart.ekz-addtocart form.cart div.quantity { margin: 0; }

/* Quantity stepper — bundle QuantityStepper: one bordered box, minus · value ·
 * plus, buttons without their own chrome, disabled end faded to .35. The box is
 * 52px tall to sit level with the add-to-cart button beside it. The native
 * number spinner is hidden because the buttons replace it. */
body .ekz-addtocart .quantity {
	/* flex: 0 0 auto — the box is a flex item of the buy row; while no variation
	 * is chosen (Woo's -disabled state) the row is narrower and the box shrank to
	 * 109px, clipping the plus button behind overflow:hidden. */
	display: inline-flex; align-items: center; height: 52px; flex: 0 0 auto; width: auto;
	border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-input);
	background: var(--ekz-white); overflow: hidden;
}
body .ekz-addtocart .quantity input.qty {
	flex: 0 0 44px; width: 44px; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
	text-align: center; font: var(--ekz-weight-semibold) 15px/1 var(--ekz-font-core); color: var(--ekz-text-strong);
	-moz-appearance: textfield; appearance: textfield;
}
body .ekz-addtocart .quantity input.qty::-webkit-outer-spin-button,
body .ekz-addtocart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body .ekz-addtocart .quantity input.qty:focus { outline: none; box-shadow: none; }
body .ekz-addtocart .ekz-qty__btn,
body .ekz-addtocart .ekz-qty__btn:hover, body .ekz-addtocart .ekz-qty__btn:focus, body .ekz-addtocart .ekz-qty__btn:active {
	flex: 0 0 44px; width: 44px; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
	display: inline-flex; align-items: center; justify-content: center;
	background: none; color: var(--ekz-text-body); cursor: pointer;
}
body .ekz-addtocart .ekz-qty__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ekz-focus-ring); }
body .ekz-addtocart .ekz-qty__btn:disabled { opacity: .35; cursor: default; }
body .ekz-addtocart .quantity:focus-within { border-color: var(--ekz-action-primary); }
body .ekz-addtocart form.cart button.single_add_to_cart_button {
	/* A FIXED width, not `flex: 1 1 240px`. Growing to fill the row made the
	 * button as wide as whatever else was in it — and the widest thing is the
	 * selected variation's name, so "Do košíka" measured 173 px on A140 and
	 * 348 px on S776 (MAR-1618). The same control has to be the same size on
	 * every product. */
	/* Beside the stepper, taking the rest of the buy row (Maroš, MAR-1634,
	   2026-09-27: "celá sekcia bude na plnú šírku, tak to bolo zamýšľané"). It was
	   `1 1 100%`, which pushed it onto its own line under the stepper (MAR-1623).
	   The row holds only the stepper and this button — the variation's name sits
	   above it — so "the rest of the row" is the same width on every product. */
	/* 52 like the other two full-width main actions (cart → checkout, place
	 * order); 15/700 and 24 inset like every button — 17px was the last 17px
	 * button on the site, off the type scale (MAR-1634 B01). */
	flex: 1 1 auto; width: auto; min-height: 52px; padding: 0 var(--ekz-space-24);
	display: inline-flex; align-items: center; justify-content: center; gap: var(--ekz-gap-tight);
	/* The missing semicolon after the font shorthand made this and the
	 * border-radius below ONE invalid declaration, so the browser dropped both
	 * and the button had no radius at all. */
	font: var(--ekz-weight-semibold) var(--ekz-size-body)/1.2 var(--ekz-font-core);
	border-radius: var(--ekz-radius-button); border: 0; float: none;
}
/* The stepper keeps its own size and the button fills the rest of its line; the
   wrap is for the variable product's form, whose picker table and variation block
   each take a line of their own above the buy row. */
body .ekz-addtocart form.cart { flex-wrap: wrap; }
/* The wrapper is a block flex-item, so with no width of its own it shrinks to
 * its widest child — the variation name — and every `width: 100%` below it is a
 * percentage of that shrunken box. Stating the width is what stops an unrelated
 * heading from sizing the buy row. */
body .ekz-addtocart .single_variation_wrap { width: 100%; }
body .ekz-addtocart .woocommerce-variation-add-to-cart { display: flex; align-items: stretch; gap: var(--ekz-gap-tight); width: 100%; }
/*
 * Elementor Pro keeps this row on one line with a (0,6,2) selector, so the rule
 * above lost and the full-width button overflowed instead of wrapping. This is
 * that same selector, copied from the plugin's own stylesheet: equal
 * specificity, and ours is enqueued after theirs, so order decides it. Written
 * this way rather than with !important — an !important would win and hide that
 * the only thing being changed is one plugin default.
 */
:is(.elementor-widget-woocommerce-product-add-to-cart,
	.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart,
	.elementor-widget-wc-add-to-cart,
	.woocommerce div.product .elementor-widget-wc-add-to-cart) form.cart.variations_form .woocommerce-variation-add-to-cart {
	flex-wrap: wrap;
}
body .ekz-addtocart .woocommerce-variation { width: 100%; }

body #wctabswrap.e-con { padding-block-start: var(--ekz-space-48); }

/* "Podobné produkty" continue the product page (Maroš, MAR-1634, 2026-09-27): no
 * top padding and no top rule, so the page body's own bottom (96 / 72 / 48) is the
 * whole space above the heading. The band keeps its bottom rhythm above the
 * footer. It is built by 22-shop.php, which must not run for a cosmetic change,
 * hence a rule keyed on the widget it holds; (0,3,0) beats `.ekz-section` and
 * `.ekz-surface-sunken` at (0,2,0). */
.e-con.ekz-section:has(.ekz-related) { padding-top: 0; border-top: 0; }

/* ============ 25. Catalogue facets (bundle FilterGroup) ================== */
/*
 * WooCommerce layered nav renders a plain <ul> of links with a count span. Two
 * presentations: sizes and lengths as chips (a scale reads better as a row of
 * boxes), everything else as a checkable list with the count right-aligned.
 */

body .ekz-facet__nav ul,
body .ekz-facet__nav .woocommerce-widget-layered-nav-list { list-style: none; margin: 0; padding: 0; }

/* -- chips -- */
body .ekz-facet__nav--chips .woocommerce-widget-layered-nav-list { display: flex; flex-wrap: wrap; gap: var(--ekz-gap-tight); }
body .ekz-facet__nav--chips .woocommerce-widget-layered-nav-list__item { margin: 0; padding: 0; }
body .ekz-facet__nav--chips .woocommerce-widget-layered-nav-list__item a {
	display: inline-flex; align-items: center; justify-content: center; min-width: 42px;
	padding: 6px 10px; border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-sm);
	font: var(--ekz-weight-semibold) 13px/1 var(--ekz-font-core); color: var(--ekz-text-strong);
	background: var(--ekz-white); transition: var(--ekz-transition-color);
}
body .ekz-facet__nav--chips .woocommerce-widget-layered-nav-list__item a:hover { border-color: var(--ekz-accent); }
body .ekz-facet__nav--chips .woocommerce-widget-layered-nav-list__item.chosen a {
	border-color: var(--ekz-action-primary); color: var(--ekz-text-accent);
}
/* The count would double the width of a chip for no gain. */
body .ekz-facet__nav--chips .woocommerce-widget-layered-nav-list__item .count { display: none; }

/* -- list -- */
body .ekz-facet__nav--list .woocommerce-widget-layered-nav-list__item {
	display: flex; align-items: center; justify-content: space-between; gap: var(--ekz-gap-tight);
	margin: 0; padding: 6px 0;
}
body .ekz-facet__nav--list .woocommerce-widget-layered-nav-list__item a {
	font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.4 var(--ekz-font-body);
	color: var(--ekz-text-body); flex: 1 1 auto;
}
body .ekz-facet__nav--list .woocommerce-widget-layered-nav-list__item a:hover { color: var(--ekz-text-accent); }
body .ekz-facet__nav--list .woocommerce-widget-layered-nav-list__item.chosen a { color: var(--ekz-text-accent); font-weight: var(--ekz-weight-semibold); }
body .ekz-facet__nav--list .woocommerce-widget-layered-nav-list__item .count {
	font: var(--ekz-weight-regular) 12px/1 var(--ekz-font-body); color: var(--ekz-text-faint); flex: 0 0 auto;
}

/* An attribute with no terms yet renders an empty widget — hide the heading too
 * so the sidebar does not carry a title with nothing under it. */
body .e-con-full.ekz-facet:has(.ekz-facet__nav .elementor-widget-container:empty) { display: none; }
body .e-con-full.ekz-facet:has(> .elementor-widget-wp-widget-woocommerce_layered_nav:empty) { display: none; }

/* The reset link is a way back, not a control — it sits quietly under the last
 * picker rather than between two attributes. */
body .ekz-addtocart .reset_variations {
	display: inline-block; order: 99; margin-top: 0;
	font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.3 var(--ekz-font-body);
	text-decoration: underline;
	/* Colour: Add to Cart widget → Štýl → Variácie → Odkaz „Vymazať“ (MAR-2486). */
}
/* MAR-1634: its cell is a flex column with a 12 gap, so the link needs no margin
   of its own. Woo hides it with an inline `visibility: hidden` until a variation
   is chosen — the box stays, and the empty 39px band made the size chips →
   quantity 63 instead of 24. Hidden means no box. */
body .ekz-addtocart .reset_variations[style*="hidden"] { display: none; }
/* The chosen variation's line (code, name, availability) sat directly on the
   quantity box. 24 to the buy row; nothing while it shows nothing. WooCommerce
   always fills it with three divs (description, price, availability), so
   `:not(:empty)` also matched a variation with none of them and made the pickers
   → buy row 48; the test is one part with content (review MAR-1634-css-2026-09-25). */
body .ekz-addtocart .single_variation:has(> :not(:empty)) { margin-bottom: var(--ekz-gap); }
body .ekz-addtocart table.variations { display: flex; flex-direction: column; gap: var(--ekz-gap-tight); }
body .ekz-addtocart table.variations tbody { display: contents; }

/* ============ 26. Side cart (Elementor Menu Cart, bundle CartLine) ======= */
/*
 * The header's Menu Cart widget binds its product name, price and buttons to
 * the kit's Global typography and writes that into the header template's CSS
 * (post-59.css) — the same trap as section 21: every line item rendered as a
 * 76px green Primary heading. Same cure: the doubled widget class outranks it.
 *
 * Layout is the bundle's CartLine scaled to a 380px drawer: 64px photo tile,
 * name 15/1.4 600, meta 13 muted, price 17 bold heading face, trash icon.
 */
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
	width: min(400px, 100vw); padding: var(--ekz-space-24);
	font: var(--ekz-weight-regular) var(--ekz-size-body)/1.5 var(--ekz-font-body); color: var(--ekz-text-body);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .18);
}
/* Drawer title — the widget prints none, and a panel without one reads as a glitch. */
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main::before {
	content: 'Košík'; display: block; margin: 0 0 var(--ekz-space-16);
	/* A heading, so 900 (MAR-1634 H01); the trailing literal 700 overrode the token. */
	font: var(--ekz-weight-heading) 22px/1.2 var(--ekz-font-heading); font-stretch: 104%;
	color: var(--ekz-text-strong);
}
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button {
	/* Absolute: the widget keeps it in flow, so the ::before title pushed it down. */
	position: absolute; top: var(--ekz-space-16); right: var(--ekz-space-16); width: 44px; height: 44px; margin: 0;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ekz-text-muted); font-size: 18px; border-radius: var(--ekz-radius-sm);
}
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button:hover { color: var(--ekz-text-strong); background: var(--ekz-surface-sunken); }

/* Line item: photo · name + meta · remove, price on the second row under the name. */
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product {
	display: grid; grid-template-columns: 64px 1fr 32px; grid-template-areas: "img name remove" "img price remove";
	column-gap: var(--ekz-gap); row-gap: var(--ekz-gap-tight); align-items: start;
	padding: var(--ekz-space-16) 0; margin: 0; border-bottom: 1px solid var(--ekz-border-subtle);
}
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-image { grid-area: img; margin: 0; }
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-image img {
	width: 64px; height: 64px; object-fit: contain; display: block; margin: 0;
	/* The card border — 2px, green when its link is hovered (MAR-1634, 2026-09-27). */
	background: var(--ekz-white); border: 2px solid var(--ekz-border-subtle); border-radius: var(--ekz-radius-sm);
	transition: var(--ekz-transition-card);
	mix-blend-mode: multiply;
}
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name { grid-area: name; margin: 0; }
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a {
	font: var(--ekz-weight-semibold) 15px/1.4 var(--ekz-font-core); color: var(--ekz-text-strong); text-decoration: none;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a:hover { color: var(--ekz-text-accent); }
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price {
	grid-area: price; margin: 0;
	font: var(--ekz-weight-bold) 15px/1.3 var(--ekz-font-heading); font-stretch:104%;font-weight:700;
	color: var(--ekz-price-main);
}
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price .woocommerce-Price-amount { font: inherit; color: inherit; }
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove { grid-area: remove; margin: 0; align-self: center; }
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove a {
	display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
	font-size: 16px; color: var(--ekz-line-faint); border-radius: var(--ekz-radius-sm); text-decoration: none;
}
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove a:hover { color: var(--ekz-stock-out-text); background: var(--ekz-surface-sunken); }

/* Subtotal and the two actions. */
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal {
	display: flex; justify-content: space-between; align-items: baseline; gap: var(--ekz-gap);
	padding: var(--ekz-space-20) 0; margin: 0; border: 0; text-align: left;
	font: var(--ekz-weight-regular) var(--ekz-size-body)/1.4 var(--ekz-font-body); color: var(--ekz-text-muted);
}
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal .woocommerce-Price-amount {
	font: var(--ekz-weight-bold) 20px/1.2 var(--ekz-font-heading); font-stretch:104%;font-weight:700; color: var(--ekz-price-main);
}
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons {
	display: flex; flex-direction: column; gap: var(--ekz-gap-tight); margin: 0;
}
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button {
	width: 100%; margin: 0; min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
	font: var(--ekz-weight-semibold) var(--ekz-size-body)/1 var(--ekz-font-core);
	border-radius: var(--ekz-radius-button); padding: 0 var(--ekz-space-20); box-shadow: none; text-decoration: none;
	transition: var(--ekz-transition-color);
}
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout {
	background: var(--ekz-action-primary); color: #fff; border: 1px solid var(--ekz-action-primary);
}
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover { background: var(--ekz-action-primary-hover); border-color: var(--ekz-action-primary-hover); color: #fff; }
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart {
	background: var(--ekz-white); color: var(--ekz-text-strong); border: 2px solid var(--ekz-border-default);
}
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover { border-color: var(--ekz-border-default); background: var(--ekz-surface-sunken); color: var(--ekz-text-strong); }
/* Checkout first: it is the primary action, Woo prints it second. */
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout { order: -1; }

body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .woocommerce-mini-cart__empty-message {
	margin: 0; padding: var(--ekz-space-24) 0;
	font: var(--ekz-weight-regular) var(--ekz-size-body)/1.5 var(--ekz-font-body); color: var(--ekz-text-muted);
}

/* ============ 27. Cart page (bundle CartLine) ============================ */
/*
 * The classic cart is a <table>. The manual's cart is a list of CartLine rows
 * with a sticky summary beside it, so the table is turned into a grid rather
 * than replaced: WooCommerce keeps rendering it (and keeps its nonces, its ajax
 * hooks, its no-JS fallback) and only the boxes move.
 *
 * DOM order inside a row is remove · photo · name · unit price · quantity ·
 * line total. The manual's order is photo · name · stepper · line total · trash,
 * so each cell is placed explicitly; unit price is dropped because the line
 * already shows the total and the product page shows the unit.
 */
body .ekz-cart.ekz-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--ekz-gap); align-items: start; }
body .ekz-cart.ekz-cart .woocommerce-cart-form { grid-column: 1; margin: 0; }
/* Notices are a full-width row above both columns; with nothing in them they
   take no row at all (an empty grid item still costs a 24px row gap). */
body .ekz-cart.ekz-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
/* Without an element inside, not only when :empty — Woo leaves whitespace in it,
   and as a grid item it would still take a row and a gap. */
body .ekz-cart.ekz-cart .woocommerce-notices-wrapper:not(:has(> *)) { display: none; }
body .ekz-cart.ekz-cart .cart-collaterals { grid-column: 2; width: auto; float: none; margin: 0; position: sticky; top: var(--ekz-space-24); }

/* The items table is structure inside the form's card (section 35): no surface
   of its own. It used to keep section 35's shadow and padding on a borderless,
   fill-less box — a shadow with no card (MAR-1634 P03). */
body .ekz-cart.ekz-cart table.shop_table.cart { display: block; width: 100%; border: 0; margin: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; }
body .ekz-cart.ekz-cart table.shop_table.cart thead { display: none; }
body .ekz-cart.ekz-cart table.shop_table.cart tbody { display: block; }

body .ekz-cart.ekz-cart tr.woocommerce-cart-form__cart-item {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto minmax(110px, auto) 32px;
	gap: var(--ekz-gap); align-items: center;
	padding: var(--ekz-gap) 0; border: 0; border-bottom: 1px solid var(--ekz-border-subtle); background: none;
}
/* The card's own 24 is the first row's top. */
body .ekz-cart.ekz-cart tr.woocommerce-cart-form__cart-item:first-child { padding-top: 0; }
body .ekz-cart.ekz-cart tr.woocommerce-cart-form__cart-item td { display: block; padding: 0; border: 0; background: none; }
body .ekz-cart.ekz-cart td.product-thumbnail { order: 1; }
body .ekz-cart.ekz-cart td.product-name { order: 2; }
body .ekz-cart.ekz-cart td.product-quantity { order: 3; }
body .ekz-cart.ekz-cart td.product-subtotal { order: 4; text-align: right; }
body .ekz-cart.ekz-cart td.product-remove { order: 5; text-align: right; }
body .ekz-cart.ekz-cart tr.woocommerce-cart-form__cart-item td.product-price { display: none; }

body .ekz-cart.ekz-cart table.shop_table td.product-thumbnail img {
	width: 84px; height: 84px; object-fit: contain; display: block;
	/* The card border — 2px, green when its link is hovered (MAR-1634, 2026-09-27). */
	background: var(--ekz-white); border: 2px solid var(--ekz-border-subtle); border-radius: var(--ekz-radius-sm);
	mix-blend-mode: multiply; transition: var(--ekz-transition-card);
}
body .ekz-cart.ekz-cart table.shop_table td.product-thumbnail a:hover img,
body .elementor-widget.elementor-widget.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-image a:hover img { border-color: var(--ekz-accent); }
body .ekz-cart.ekz-cart td.product-name a {
	font: var(--ekz-weight-semibold) 15px/1.4 var(--ekz-font-core); color: var(--ekz-text-strong); text-decoration: none;
}
body .ekz-cart.ekz-cart td.product-name a:hover { color: var(--ekz-text-accent); }
/* SKU and the variation attributes read as one muted meta line, not a table. */
body .ekz-cart.ekz-cart td.product-name .variation {
	display: flex; flex-wrap: wrap; gap: 0 var(--ekz-gap-tight); margin: 4px 0 0;
	font: var(--ekz-weight-regular) 13px/1.4 var(--ekz-font-body); color: var(--ekz-text-muted);
}
body .ekz-cart.ekz-cart td.product-name .variation dt { font-weight: inherit; margin: 0; }
body .ekz-cart.ekz-cart td.product-name .variation dt::after { content: none; }
body .ekz-cart.ekz-cart td.product-name .variation dd { margin: 0; }
body .ekz-cart.ekz-cart td.product-name .variation dd p { margin: 0; }
body .ekz-cart.ekz-cart td.product-name .variation dd:not(:last-child)::after { content: " ·"; color: var(--ekz-line-faint); }

body .ekz-cart.ekz-cart td.product-subtotal .woocommerce-Price-amount {
	font: var(--ekz-weight-bold) 17px/1.2 var(--ekz-font-heading); font-stretch:104%;font-weight:700;
	color: var(--ekz-price-main); white-space: nowrap;
}
body .ekz-cart.ekz-cart td.product-subtotal small {
	display: block; font: var(--ekz-weight-regular) 12px/1.3 var(--ekz-font-body); color: var(--ekz-price-secondary);
}
/* The one !important in this file. WooCommerce ships `.woocommerce a.remove
   { color: #a00 !important }`, so no amount of specificity reaches it — the
   icon stayed post-box red next to a green palette. Scoped to this one cell. */
body .ekz-cart.ekz-cart table.shop_table td.product-remove a.remove {
	display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
	color: var(--ekz-line-faint) !important; background: none; border-radius: var(--ekz-radius-sm); font-size: 0; text-decoration: none;
	transition: var(--ekz-transition-color);
}
body .ekz-cart.ekz-cart table.shop_table td.product-remove a.remove:hover { color: var(--ekz-stock-out-text) !important; background: var(--ekz-surface-sunken); }

/* Coupon row + the (kept, but rarely needed) update button. */
body .ekz-cart.ekz-cart tr:not(.woocommerce-cart-form__cart-item) td.actions {
	display: flex; flex-wrap: wrap; gap: var(--ekz-gap-tight); align-items: center;
	padding: var(--ekz-space-24) 0 0; border: 0;
}
body .ekz-cart.ekz-cart td.actions .coupon { display: flex; gap: var(--ekz-gap-tight); flex: 1 1 320px; padding: 0; border: 0; }
body .ekz-cart.ekz-cart td.actions .coupon label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body .ekz-cart.ekz-cart td.actions .coupon input#coupon_code { width: auto; flex: 1 1 auto; min-width: 0; }
/* The auto-update script normally presses this; visible so the no-JS path works. */
body .ekz-cart.ekz-cart td.actions button[name="update_cart"] { margin-left: auto; }
body .ekz-cart.ekz-cart .woocommerce-cart-form.is-updating td.product-subtotal { opacity: .45; transition: opacity var(--ekz-duration-fast) var(--ekz-ease-standard); }

/* Summary card — the same card as the checkout summary so the two pages rhyme;
   its surface is section 35's, the heading and table are its content. */
body .ekz-cart.ekz-cart .cart-collaterals .cart_totals { width: auto; float: none; }
body .ekz-cart.ekz-cart .cart_totals > h2 {
	margin: 0 0 var(--ekz-gap);
	font: var(--ekz-weight-heading) var(--ekz-size-h4)/1.25 var(--ekz-font-heading); font-stretch: 104%;
	color: var(--ekz-text-strong); text-transform: none; letter-spacing: 0;
}
/* Structure, not a second card inside the first (MAR-1634 P03). */
body .ekz-cart.ekz-cart .cart_totals table.shop_table { display: block; width: 100%; border: 0; margin: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; }
body .ekz-cart.ekz-cart .cart_totals table.shop_table tbody { display: block; }
/* The checkout summary's rhythm (MAR-1634, see there): rows 12 apart through
   their own top margin, the total behind a line with 24 above and below. */
body .ekz-cart.ekz-cart .cart_totals table.shop_table tr {
	display: flex; justify-content: space-between; align-items: baseline; gap: var(--ekz-gap);
	padding: 0; margin: var(--ekz-gap-tight) 0 0; border: 0;
}
body .ekz-cart.ekz-cart .cart_totals table.shop_table th,
body .ekz-cart.ekz-cart .cart_totals table.shop_table td {
	display: block; padding: 0; border: 0; background: none; text-align: right;
	font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.4 var(--ekz-font-body); color: var(--ekz-text-body);
}
body .ekz-cart.ekz-cart .cart_totals table.shop_table th { text-align: left; font-weight: var(--ekz-weight-regular); color: var(--ekz-text-muted); }
/* Through table.shop_table (0,5,3): at (0,4,2) this line and its padding never
   applied — the row rule above (0,4,3) set border 0 — so the cart's total had no
   line while the checkout's had one (MAR-1634). */
body .ekz-cart.ekz-cart .cart_totals table.shop_table tr.order-total { border-top: 1px solid var(--ekz-border-default); margin-top: var(--ekz-gap); padding-top: var(--ekz-gap); }
body .ekz-cart.ekz-cart .cart_totals tr.order-total th { font: var(--ekz-weight-semibold) 15px/1.2 var(--ekz-font-core); color: var(--ekz-text-strong); }
/* No align-items of its own: an `align-items: flex-start` here (0,4,2) never beat
   the row rule's baseline (0,4,3). "Spolu" sits on the amount's baseline, as in
   the checkout (MAR-1634). */
body .ekz-cart.ekz-cart .cart_totals tr.order-total td { display: flex; flex-direction: column; align-items: flex-end; gap: var(--ekz-gap-tight); }
body .ekz-cart.ekz-cart .cart_totals tr.order-total .woocommerce-Price-amount {
	font: var(--ekz-weight-bold) 28px/1 var(--ekz-font-heading); font-stretch:104%;font-weight:700; color: var(--ekz-text-strong);
}
body .ekz-cart.ekz-cart .cart_totals tr.order-total small.includes_tax {
	display: block; font: var(--ekz-weight-regular) 12px/1.3 var(--ekz-font-body); color: var(--ekz-price-secondary); white-space: nowrap;
}
body .ekz-cart.ekz-cart .cart_totals tr.order-total small.includes_tax .woocommerce-Price-amount { font: inherit; color: inherit; }
body .ekz-cart.ekz-cart .cart_totals .woocommerce-shipping-destination,
body .ekz-cart.ekz-cart .cart_totals .woocommerce-shipping-calculator { font-size: var(--ekz-size-caption); color: var(--ekz-text-muted); }
body .ekz-cart.ekz-cart .cart_totals ul#shipping_method { list-style: none; margin: 0; padding: 0; text-align: left; }
body .ekz-cart.ekz-cart .cart_totals ul#shipping_method li { display: flex; gap: var(--ekz-gap-tight); align-items: baseline; margin: 0 0 4px; }

/* Summary card rhythm (MAR-1634): totals → button 24, button → "Pokračovať v
   nákupe" 12 (its secondary link), → B2B note 24. Each space has one owner, all
   on the 24/12 scale; the three were 16. */
body .ekz-cart.ekz-cart .wc-proceed-to-checkout { padding: var(--ekz-gap) 0 0; }
/* One of the three full-width main actions, so 52 like "Do košíka" and the order
   button — it was 48, a third height (MAR-1634 B01); inset 24 like every button. */
body .ekz-cart.ekz-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 0; padding: 0 var(--ekz-space-24);
	font: var(--ekz-weight-semibold) var(--ekz-size-body)/1.2 var(--ekz-font-core);
	background: var(--ekz-action-primary); color: #fff; border: 1px solid var(--ekz-action-primary);
	border-radius: var(--ekz-radius-button); text-decoration: none;
}
body .ekz-cart.ekz-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--ekz-action-primary-hover); border-color: var(--ekz-action-primary-hover); color: #fff; }
/* Block-level (flex, sized to its content): as inline-flex it sat in a line box
   whose leading added ~8px under it that no rule owned. */
body .ekz-cart.ekz-cart .ekz-cart__continue {
	display: flex; width: fit-content; align-items: center; gap: var(--ekz-gap-tight); margin-top: var(--ekz-gap-tight);
	font: var(--ekz-weight-medium) var(--ekz-size-body-sm)/1 var(--ekz-font-core); color: var(--ekz-text-muted); text-decoration: none;
}
/* Steps to green like every text-coloured link; text-strong and text-muted are
   the same colour since the one-text-colour rule, so the hover showed nothing
   (MAR-1634 L01). */
body .ekz-cart.ekz-cart .ekz-cart__continue:hover { color: var(--ekz-text-accent); }

/* B2B pointer under the totals: an aside, not a second call to action. */
body .ekz-cart.ekz-cart .ekz-cart__b2b {
	margin: var(--ekz-gap) 0 0;
	font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.5 var(--ekz-font-core); color: var(--ekz-text-muted);
}
body .ekz-cart.ekz-cart .ekz-cart__b2b a { color: var(--ekz-text-link); text-decoration: underline; }
body .ekz-cart.ekz-cart .ekz-cart__b2b a:hover { color: var(--ekz-text-link-hover); }

/*
 * Empty state: one card holding the message and the way back (MAR-1634 H01).
 *
 * Woo prints the message and the "Vrátiť sa do obchodu" link as loose children of
 * the cart's two-column grid, so the message took column one and the button stood
 * alone in column two. The message also wore Woo's info notice — a blue box, and
 * blue is not in the palette. Here the grid collapses to one column, the shortcode
 * wrapper is the card (section 35), and the message is a 900 heading inside it.
 */
body .ekz-cart.ekz-cart .woocommerce:has(> .wc-empty-cart-message) { display: block; text-align: center; }
body .ekz-cart.ekz-cart .cart-empty {
	margin: 0 0 var(--ekz-gap); padding: 0; border: 0; border-radius: 0; background: none;
	font: var(--ekz-weight-heading) var(--ekz-size-h3)/1.2 var(--ekz-font-heading); font-stretch: 104%;
	color: var(--ekz-text-strong); text-align: center;
}
body .ekz-cart.ekz-cart .cart-empty::before { content: none; }
body .ekz-cart.ekz-cart .return-to-shop { margin: 0; text-align: center; }
/* The primary button's box: 12/24, 15/700, 1px border → 44 (was 48, B01). */
body .ekz-cart.ekz-cart .return-to-shop .button {
	display: inline-flex; align-items: center; min-height: 0; padding: 12px var(--ekz-space-24);
	background: var(--ekz-action-primary); color: #fff; border: 1px solid transparent; border-radius: var(--ekz-radius-button);
	font: var(--ekz-weight-bold) var(--ekz-size-body)/1.2 var(--ekz-font-core); text-decoration: none;
}
body .ekz-cart.ekz-cart .return-to-shop .button:hover { background: var(--ekz-action-primary-hover); color: #fff; }

@media (max-width: 1024px) {
	body .ekz-cart.ekz-cart .woocommerce { grid-template-columns: minmax(0, 1fr); gap: var(--ekz-gap); }
	body .ekz-cart.ekz-cart .woocommerce-cart-form,
	body .ekz-cart.ekz-cart .cart-collaterals { grid-column: 1; position: static; }
}
@media (max-width: 640px) {
	body .ekz-cart.ekz-cart tr.woocommerce-cart-form__cart-item {
		grid-template-columns: 64px minmax(0, 1fr) 32px;
		grid-template-areas: "img name remove" "img qty total";
		row-gap: var(--ekz-gap-tight);
	}
	body .ekz-cart.ekz-cart td.product-thumbnail { grid-area: img; align-self: start; }
	body .ekz-cart.ekz-cart table.shop_table td.product-thumbnail img { width: 64px; height: 64px; }
	body .ekz-cart.ekz-cart td.product-name { grid-area: name; }
	body .ekz-cart.ekz-cart td.product-quantity { grid-area: qty; }
	body .ekz-cart.ekz-cart td.product-subtotal { grid-area: total; text-align: right; }
	body .ekz-cart.ekz-cart td.product-remove { grid-area: remove; }
	body .ekz-cart.ekz-cart td.actions .coupon { flex: 1 1 100%; }
	body .ekz-cart.ekz-cart td.actions button[name="update_cart"] { margin-left: 0; width: 100%; }
}

/* ============ 28. Checkout (bundle CheckoutPage) ========================= */
/*
 * Classic checkout, laid out the way the manual draws it: form on the left,
 * order summary as a sticky card on the right. WooCommerce emits
 * #customer_details, then the review heading, then #order_review as three
 * siblings of form.checkout, so the grid places them rather than reflowing.
 */
body .ekz-checkout.ekz-checkout form.checkout {
	display: grid; grid-template-columns: minmax(0, 1fr) 380px;
	column-gap: var(--ekz-gap); row-gap: var(--ekz-gap); align-items: start;
}
body .ekz-checkout.ekz-checkout #customer_details { grid-column: 1; grid-row: 1; }
/* Heading + review share one wrapper (inc/shop-checkout.php, MAR-1634 P04): the
   summary is one card, and the card is what sticks. */
body .ekz-checkout.ekz-checkout .ekz-checkout__summary { grid-column: 2; grid-row: 1; position: sticky; top: var(--ekz-space-24); align-self: start; }
/* Notices and the login/coupon toggles are full width above the two columns. */
body .ekz-checkout.ekz-checkout .woocommerce-form-login-toggle,
body .ekz-checkout.ekz-checkout .woocommerce-form-coupon-toggle,
body .ekz-checkout.ekz-checkout form.login,
body .ekz-checkout.ekz-checkout form.checkout_coupon { grid-column: 1 / -1; }

/* The two-column set inside customer details is not the page layout — the
   manual has billing, shipping and the note stacked: three cards, 24 apart
   (MAR-1634 P04). #customer_details IS the .col2-set — one element with both
   names — so these read `#customer_details.col2-set`; the descendant form this
   used to be matched nothing, and the three cards touched. */
body .ekz-checkout.ekz-checkout #customer_details.col2-set,
body .ekz-checkout.ekz-checkout #customer_details .col-1,
body .ekz-checkout.ekz-checkout #customer_details .col-2 { width: auto; float: none; margin: 0; }
body .ekz-checkout.ekz-checkout #customer_details.col2-set,
body .ekz-checkout.ekz-checkout #customer_details .col-2 { display: flex; flex-direction: column; gap: var(--ekz-gap); }
/* Woo's clearfix pseudos would be flex items here, each adding a gap. */
body .ekz-checkout.ekz-checkout #customer_details.col2-set::before,
body .ekz-checkout.ekz-checkout #customer_details.col2-set::after { content: none; }

/* Every heading sits inside its card, 24 above the card's content; headings are
   900 (brief B8). */
body .ekz-checkout.ekz-checkout h3,
body .ekz-checkout.ekz-checkout #order_review_heading {
	font: var(--ekz-weight-heading) var(--ekz-size-h4)/1.25 var(--ekz-font-heading); font-stretch: 104%;
	color: var(--ekz-text-strong); margin: 0 0 var(--ekz-gap); text-transform: none; letter-spacing: 0;
}

/* --- fields ------------------------------------------------------------- */
body .ekz-checkout.ekz-checkout .woocommerce-billing-fields__field-wrapper,
body .ekz-checkout.ekz-checkout .woocommerce-shipping-fields__field-wrapper,
body .ekz-checkout.ekz-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ekz-gap);
}
body .ekz-checkout.ekz-checkout .form-row { margin: 0; padding: 0; float: none; width: auto; grid-column: span 6; }
body .ekz-checkout.ekz-checkout .form-row-wide { grid-column: span 6; }
body .ekz-checkout.ekz-checkout .form-row-first,
body .ekz-checkout.ekz-checkout .form-row-last { grid-column: span 3; }
body .ekz-checkout.ekz-checkout .form-row-third { grid-column: span 2; }
/* Label → field 12, as in every form (F01; MAR-1634 — it was 6). */
body .ekz-checkout.ekz-checkout .form-row label {
	display: block; margin: 0 0 var(--ekz-gap-tight);
	font: var(--ekz-weight-medium) var(--ekz-size-body-sm)/1.3 var(--ekz-font-core); color: var(--ekz-text-strong);
}
body .ekz-checkout.ekz-checkout .form-row .required { color: var(--ekz-danger-500); text-decoration: none; border: 0; }
body .ekz-checkout.ekz-checkout .form-row input.input-text,
body .ekz-checkout.ekz-checkout .form-row textarea,
body .ekz-checkout.ekz-checkout .form-row .select2-selection--single,
body .ekz-checkout.ekz-checkout .form-row select {
	width: 100%; min-height: 44px; padding: 0 var(--ekz-space-14); box-sizing: border-box;
	font: var(--ekz-weight-regular) var(--ekz-size-body)/1.4 var(--ekz-font-body); color: var(--ekz-text-strong);
	background: var(--ekz-white); border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-input);
	transition: var(--ekz-transition-color);
}
body .ekz-checkout.ekz-checkout .form-row textarea { min-height: 96px; padding: var(--ekz-space-12) var(--ekz-space-14); resize: vertical; }
body .ekz-checkout.ekz-checkout .form-row input.input-text:focus,
body .ekz-checkout.ekz-checkout .form-row textarea:focus,
body .ekz-checkout.ekz-checkout .form-row select:focus { outline: none; border-color: var(--ekz-action-primary); box-shadow: var(--ekz-shadow-focus); }
body .ekz-checkout.ekz-checkout .form-row.woocommerce-invalid input.input-text { border-color: var(--ekz-danger-500); }
body .ekz-checkout.ekz-checkout .select2-container--default .select2-selection--single { height: 44px; display: flex; align-items: center; }
body .ekz-checkout.ekz-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0; color: var(--ekz-text-strong); }
body .ekz-checkout.ekz-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }

/* Company block: hidden until "Nakupujem na firmu" is ticked (inc/shop-checkout.php). */
body .ekz-checkout.ekz-checkout .ekz-company-toggle { grid-column: span 6; }
body .ekz-checkout.ekz-checkout .ekz-company-toggle label {
	display: inline-flex; align-items: center; gap: var(--ekz-gap-tight); margin: 0; cursor: pointer;
	font: var(--ekz-weight-regular) var(--ekz-size-body)/1.4 var(--ekz-font-body); color: var(--ekz-text-body);
}
body .ekz-checkout.ekz-checkout .ekz-company-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ekz-action-primary); margin: 0; }
body .ekz-checkout.ekz-checkout .ekz-company-field { display: none; }
body .ekz-checkout.ekz-checkout .ekz-company-field.is-open { display: block; }

/* --- shipping + payment as radio cards ---------------------------------- */
body .ekz-checkout.ekz-checkout #order_review ul#shipping_method,
body .ekz-checkout.ekz-checkout ul.wc_payment_methods { list-style: none; margin: 0; padding: 0; }
/* Choice rows (MAR-1634 P05): nested 6, the control border, 12 apart. The label
   carries the 12/24 padding (below), so a click anywhere lands on the radio. */
body .ekz-checkout.ekz-checkout #order_review ul#shipping_method li,
body .ekz-checkout.ekz-checkout ul.wc_payment_methods li.wc_payment_method {
	display: block; margin: 0 0 var(--ekz-gap-tight); padding: 0;
	background: var(--ekz-white); border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-sm);
	transition: var(--ekz-transition-color); text-align: left;
}
body .ekz-checkout.ekz-checkout #order_review ul#shipping_method li:hover,
body .ekz-checkout.ekz-checkout ul.wc_payment_methods li.wc_payment_method:hover { border-color: var(--ekz-accent); }
body .ekz-checkout.ekz-checkout #order_review ul#shipping_method li:has(input:checked),
body .ekz-checkout.ekz-checkout ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--ekz-action-primary); background: var(--ekz-green-50);
}
body .ekz-checkout.ekz-checkout #order_review ul#shipping_method li label,
body .ekz-checkout.ekz-checkout ul.wc_payment_methods li.wc_payment_method > label {
	display: inline-flex; align-items: center; gap: var(--ekz-gap-tight); margin: 0; cursor: pointer;
	font: var(--ekz-weight-semibold) var(--ekz-size-body)/1.35 var(--ekz-font-core); color: var(--ekz-text-strong);
}
body .ekz-checkout.ekz-checkout #order_review ul#shipping_method li input[type="radio"],
body .ekz-checkout.ekz-checkout ul.wc_payment_methods li.wc_payment_method > input[type="radio"] {
	width: 18px; height: 18px; margin: 0 var(--ekz-space-10) 0 0; accent-color: var(--ekz-action-primary); flex: 0 0 auto;
}
body .ekz-checkout.ekz-checkout ul.wc_payment_methods li.wc_payment_method > label img { max-height: 24px; width: auto; margin: 0 0 0 var(--ekz-space-8); }
body .ekz-checkout.ekz-checkout #payment div.payment_box {
	background: none; border: 0; border-radius: 0;
	font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.5 var(--ekz-font-body); color: var(--ekz-text-muted);
}
body .ekz-checkout.ekz-checkout #payment div.payment_box::before { content: none; display: none; }
body .ekz-checkout.ekz-checkout .payment_box p { margin: 0; }
body .ekz-checkout.ekz-checkout #payment { background: none; border-radius: 0; padding: var(--ekz-gap) 0 0; }
/* The button row's rhythm lives in the tail block below; here only Woo's 1em
   form-row padding goes. */
body .ekz-checkout.ekz-checkout #payment div.form-row.place-order { padding: 0; margin: 0; }

/* --- order summary ------------------------------------------------------- */
/* The card is .ekz-checkout__summary, around the heading and this (section 35);
   the review itself is structure inside it. */
body .ekz-checkout.ekz-checkout #order_review { padding: 0; background: none; border: 0; border-radius: 0; }
/* Radius 0 too: a table inside the summary card is structure, not a surface —
   Woo's 5px survived on a box with no border or fill (MAR-1634 TABLE profile). */
body .ekz-checkout.ekz-checkout table.woocommerce-checkout-review-order-table { display: block; width: 100%; border: 0; border-radius: 0; margin: 0; background: none; }
body .ekz-checkout.ekz-checkout table.woocommerce-checkout-review-order-table thead { display: none; }
body .ekz-checkout.ekz-checkout table.woocommerce-checkout-review-order-table tbody,
body .ekz-checkout.ekz-checkout table.woocommerce-checkout-review-order-table tfoot { display: block; }
body .ekz-checkout.ekz-checkout table.woocommerce-checkout-review-order-table tbody tr.cart_item {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ekz-gap-tight); align-items: center;
	padding: var(--ekz-space-12) 0; border: 0; border-bottom: 1px solid var(--ekz-border-subtle);
}
body .ekz-checkout.ekz-checkout table.woocommerce-checkout-review-order-table td,
body .ekz-checkout.ekz-checkout table.woocommerce-checkout-review-order-table th { display: block; padding: 0; border: 0; background: none; }
body .ekz-checkout.ekz-checkout tbody tr.cart_item td.product-name {
	font: var(--ekz-weight-semibold) var(--ekz-size-body-sm)/1.4 var(--ekz-font-core); color: var(--ekz-text-strong);
}
body .ekz-checkout.ekz-checkout tbody tr.cart_item td.product-name img { display: none; }
body .ekz-checkout.ekz-checkout tbody tr.cart_item td.product-name .product-quantity { color: var(--ekz-text-muted); font-weight: var(--ekz-weight-regular); }
body .ekz-checkout.ekz-checkout tbody tr.cart_item td.product-name .variation {
	display: flex; flex-wrap: wrap; gap: 0 var(--ekz-gap-tight); margin: 2px 0 0;
	font: var(--ekz-weight-regular) 12px/1.4 var(--ekz-font-body); color: var(--ekz-text-muted);
}
body .ekz-checkout.ekz-checkout tbody tr.cart_item td.product-name .variation dt,
body .ekz-checkout.ekz-checkout tbody tr.cart_item td.product-name .variation dd { margin: 0; font-weight: inherit; }
body .ekz-checkout.ekz-checkout tbody tr.cart_item td.product-name .variation dt::after { content: none; }
body .ekz-checkout.ekz-checkout tbody tr.cart_item td.product-name .variation dd p { margin: 0; }
body .ekz-checkout.ekz-checkout tbody tr.cart_item td.product-total {
	text-align: right; white-space: nowrap;
	font: var(--ekz-weight-semibold) var(--ekz-size-body-sm)/1.3 var(--ekz-font-core); color: var(--ekz-text-strong);
}

/* Summary rhythm, the same in the cart (MAR-1634): rows 12 apart — each row's own
   top margin is the one owner, so the first one also sits 12 under the last item's
   line — "Doprava" → its methods 12, and the total behind a line with 24 above it
   and 24 below it. Rows were padded 8/8, the methods 8 under their label, the
   line 8 above / 16 below. */
body .ekz-checkout.ekz-checkout table.woocommerce-checkout-review-order-table tfoot tr {
	display: flex; justify-content: space-between; align-items: baseline; gap: var(--ekz-gap);
	padding: 0; margin: var(--ekz-gap-tight) 0 0; border: 0;
}
body .ekz-checkout.ekz-checkout table.woocommerce-checkout-review-order-table tfoot th {
	text-align: left; font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.4 var(--ekz-font-body); color: var(--ekz-text-muted);
}
body .ekz-checkout.ekz-checkout table.woocommerce-checkout-review-order-table tfoot td {
	text-align: right; font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.4 var(--ekz-font-body); color: var(--ekz-text-body);
}
/* The methods wrap to a line of their own; the row's 24 gap (label ↔ value) was
   also its row gap, and with the cell's margin the label → first method measured
   36. The row gap alone owns it: 12, as in the cart. */
body .ekz-checkout.ekz-checkout table.woocommerce-checkout-review-order-table tfoot tr.shipping { flex-wrap: wrap; row-gap: var(--ekz-gap-tight); }
body .ekz-checkout.ekz-checkout table.woocommerce-checkout-review-order-table tfoot tr.shipping td { flex: 1 1 100%; text-align: left; margin-top: 0; }
body .ekz-checkout.ekz-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total {
	border-top: 1px solid var(--ekz-border-default); margin-top: var(--ekz-gap); padding-top: var(--ekz-gap);
}
body .ekz-checkout.ekz-checkout tfoot tr.order-total th { font: var(--ekz-weight-semibold) 15px/1.2 var(--ekz-font-core); color: var(--ekz-text-strong); }
body .ekz-checkout.ekz-checkout tfoot tr.order-total .woocommerce-Price-amount {
	font: var(--ekz-weight-bold) 28px/1 var(--ekz-font-heading); font-stretch:104%;font-weight:700; color: var(--ekz-text-strong);
}
body .ekz-checkout.ekz-checkout tfoot tr.order-total small.includes_tax {
	display: block; font: var(--ekz-weight-regular) 12px/1.3 var(--ekz-font-body); color: var(--ekz-price-secondary);
}

body .ekz-checkout.ekz-checkout .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; }
body .ekz-checkout.ekz-checkout .woocommerce-form__label-for-checkbox {
	display: inline-flex; align-items: flex-start; gap: var(--ekz-gap-tight); cursor: pointer;
	font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.5 var(--ekz-font-body); color: var(--ekz-text-body);
}
body .ekz-checkout.ekz-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] {
	width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ekz-action-primary); flex: 0 0 auto;
}
/* The primary button's type, 15/700 (B01) — at 17px "Objednať s povinnosťou
   platby" did not fit a 390px phone's card and lost its last letters. Wraps
   rather than clips if a translation ever runs longer. */
body .ekz-checkout.ekz-checkout #place_order {
	width: 100%; min-height: 52px; margin: 0; padding: var(--ekz-space-12) var(--ekz-gap); white-space: normal;
	font: var(--ekz-weight-bold) var(--ekz-size-body)/1.25 var(--ekz-font-core);
	background: var(--ekz-action-primary); color: #fff; border: 1px solid var(--ekz-action-primary);
	border-radius: var(--ekz-radius-button); cursor: pointer; transition: var(--ekz-transition-color);
}
body .ekz-checkout.ekz-checkout #place_order:hover { background: var(--ekz-action-primary-hover); border-color: var(--ekz-action-primary-hover); }
body .ekz-checkout.ekz-checkout .ekz-checkout__trust {
	display: flex; align-items: center; justify-content: center; gap: var(--ekz-gap-tight);
	font: var(--ekz-weight-regular) 12px/1.4 var(--ekz-font-body); color: var(--ekz-text-muted);
}

/* Order-received page — the manual's confirmation state. */
body.woocommerce-order .woocommerce-thankyou-order-received {
	margin: 0 0 var(--ekz-space-16);
	/* Headings on the thank-you page are 900 like every other (MAR-1634 H01). */
	font: var(--ekz-weight-heading) var(--ekz-size-h2)/1.15 var(--ekz-font-heading); font-stretch: 104%;
	color: var(--ekz-text-strong);
}
body.woocommerce-order ul.woocommerce-order-overview {
	list-style: none; display: flex; flex-wrap: wrap; gap: var(--ekz-gap); margin: 0 0 var(--ekz-space-32); padding: var(--ekz-space-20) var(--ekz-space-24);
	background: var(--ekz-surface-sunken); border: 2px solid var(--ekz-border-subtle); border-radius: var(--ekz-radius-card);
}
body.woocommerce-order ul.woocommerce-order-overview li {
	border: 0; margin: 0; padding: 0; text-transform: none;
	font: var(--ekz-weight-regular) var(--ekz-size-caption)/1.4 var(--ekz-font-body); color: var(--ekz-text-muted);
}
body.woocommerce-order ul.woocommerce-order-overview li strong {
	display: block; margin-top: 4px;
	font: var(--ekz-weight-semibold) var(--ekz-size-body)/1.3 var(--ekz-font-core); color: var(--ekz-text-strong);
}

@media (max-width: 1024px) {
	body .ekz-checkout.ekz-checkout form.checkout { grid-template-columns: minmax(0, 1fr); }
	body .ekz-checkout.ekz-checkout #customer_details,
	body .ekz-checkout.ekz-checkout .ekz-checkout__summary { grid-column: 1; grid-row: auto; position: static; }
}
@media (max-width: 640px) {
	body .ekz-checkout.ekz-checkout .form-row-first,
	body .ekz-checkout.ekz-checkout .form-row-last,
	body .ekz-checkout.ekz-checkout .form-row-third { grid-column: span 6; }
}

/* Coupon apply is secondary — the primary action on this page is the checkout. */
body .ekz-cart.ekz-cart td.actions button[name="apply_coupon"] {
	background: var(--ekz-white); color: var(--ekz-text-strong); border: 2px solid var(--ekz-border-default);
	min-height: 44px; padding: 0 var(--ekz-space-24); border-radius: var(--ekz-radius-button); white-space: nowrap;
	font: var(--ekz-weight-semibold) var(--ekz-size-body-sm)/1 var(--ekz-font-core);
}
body .ekz-cart.ekz-cart td.actions button[name="apply_coupon"]:hover { border-color: var(--ekz-border-default); background: var(--ekz-surface-sunken); }
body .ekz-cart.ekz-cart td.actions button[name="update_cart"] {
	min-height: 44px; padding: 0 var(--ekz-space-24); border-radius: var(--ekz-radius-button); white-space: nowrap;
	font: var(--ekz-weight-semibold) var(--ekz-size-body-sm)/1 var(--ekz-font-core);
}

/* --- checkout, second pass ---------------------------------------------- */
/* Country and state are single-valued here: Woo still posts them from the
   hidden inputs it renders, so the visible row is noise. */
/* !important, and not by choice: WooCommerce's address-i18n script shows and
   hides locale fields with jQuery .show()/.hide(), which writes an INLINE
   display — no selector can outrank that. Only Slovakia is sellable, so the
   country and state rows are pure noise; both still post from their inputs. */
body .ekz-checkout.ekz-checkout .form-row.ekz-field-hidden { display: none !important; }
/* The trust line sits in .place-order, which Woo lays out as a form-row; without
   an explicit width it collapsed to 0 and the text stacked one letter per line. */
body .ekz-checkout.ekz-checkout #payment div.form-row.place-order { display: block; width: 100%; }
body .ekz-checkout.ekz-checkout .ekz-checkout__trust { width: 100%; }
body .ekz-checkout.ekz-checkout .woocommerce-privacy-policy-text p { margin: 0; }
/* Login / coupon toggles read as quiet notices, not as alerts. */
body .ekz-checkout.ekz-checkout .woocommerce-form-login-toggle .woocommerce-info,
body .ekz-checkout.ekz-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: var(--ekz-surface-sunken); border: 2px solid var(--ekz-border-subtle); border-top-width: 2px;
	/* A notice (MAR-1634 N01): nested 6, 12/24. */
	border-radius: var(--ekz-radius-sm); padding: var(--ekz-space-12) var(--ekz-gap); margin: 0 0 var(--ekz-gap-tight);
	font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.4 var(--ekz-font-body); color: var(--ekz-text-body);
}
body .ekz-checkout.ekz-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
body .ekz-checkout.ekz-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { content: none; }
body .ekz-checkout.ekz-checkout .woocommerce-info a { color: var(--ekz-text-link); }
/* Every rule that sets a link's colour sets its hover too — a rest colour at this
   specificity also wins over the site's `a:hover`, which is how these links went
   dead (MAR-1634 L01). */
body .ekz-checkout.ekz-checkout .woocommerce-info a:hover { color: var(--ekz-text-link-hover); }


/* Row placement, stated once in CSS.
 *
 * wc-address-i18n.js re-sorts the billing rows in the browser from the country
 * locale, and it only knows about ADDRESS fields — so the phone kept landing at
 * the bottom however the PHP was ordered. The wrapper is a grid, so `order`
 * settles the layout no matter what the script does to the DOM, and the widths
 * are pinned here too because the same script rewrites the row classes. */
body .ekz-checkout.ekz-checkout #billing_first_name_field { order: 1; grid-column: span 3; }
body .ekz-checkout.ekz-checkout #billing_last_name_field  { order: 2; grid-column: span 3; }
body .ekz-checkout.ekz-checkout #billing_email_field      { order: 3; grid-column: span 3; }
body .ekz-checkout.ekz-checkout #billing_phone_field      { order: 4; grid-column: span 3; }
body .ekz-checkout.ekz-checkout #ekz_is_company_field     { order: 5; grid-column: span 6; }
body .ekz-checkout.ekz-checkout #billing_company_field    { order: 6; grid-column: span 6; }
body .ekz-checkout.ekz-checkout #billing_ico_field        { order: 7; grid-column: span 2; }
body .ekz-checkout.ekz-checkout #billing_dic_field        { order: 8; grid-column: span 2; }
body .ekz-checkout.ekz-checkout #billing_ic_dph_field     { order: 9; grid-column: span 2; }
body .ekz-checkout.ekz-checkout #billing_address_1_field  { order: 10; grid-column: span 2; }
body .ekz-checkout.ekz-checkout #billing_city_field       { order: 11; grid-column: span 2; }
body .ekz-checkout.ekz-checkout #billing_postcode_field   { order: 12; grid-column: span 2; }
body .ekz-checkout.ekz-checkout #billing_address_2_field  { order: 13; grid-column: span 6; }

/* ============ 29. Order received ======================================== */
/* The endpoint reuses the checkout page, so its Elementor header still reads
   "Pokladňa"; the confirmation block from inc/shop-checkout.php replaces it. */
body.woocommerce-order-received .ekz-pagehead { display: none; }
body.woocommerce-order-received .ekz-checkout { padding-top: var(--ekz-space-72); }

body .ekz-thanks {
	display: flex; flex-direction: column; align-items: center; gap: var(--ekz-gap);
	text-align: center; margin: 0 auto var(--ekz-space-56); max-width: 52ch;
}
body .ekz-thanks__mark {
	display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px;
	border-radius: var(--ekz-radius-pill); background: var(--ekz-green-50); color: var(--ekz-green-700);
}
body .ekz-thanks__title {
	margin: 0; font: var(--ekz-weight-heading) var(--ekz-size-h2)/1.15 var(--ekz-font-heading);
	font-stretch: 104%; color: var(--ekz-text-strong);
}
body .ekz-thanks__lede { margin: 0; font: var(--ekz-weight-regular) var(--ekz-size-body-lg)/1.6 var(--ekz-font-body); color: var(--ekz-text-body); }
/* The primary button's box: 12/24, 15/700, 1px border → 44 (was 48 and 28 wide
   padding, MAR-1634 B01). */
body .ekz-thanks__action {
	display: inline-flex; align-items: center; padding: 12px var(--ekz-space-24);
	background: var(--ekz-action-primary); color: #fff; border: 1px solid transparent; border-radius: var(--ekz-radius-button); text-decoration: none;
	font: var(--ekz-weight-bold) var(--ekz-size-body)/1.2 var(--ekz-font-core);
}
body .ekz-thanks__action:hover { background: var(--ekz-action-primary-hover); color: #fff; }

/* Order details + addresses: the same sunken card as the checkout summary. */
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details { margin: 0 0 var(--ekz-space-40); }
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title {
	margin: 0 0 var(--ekz-space-16);
	font: var(--ekz-weight-heading) var(--ekz-size-h4)/1.25 var(--ekz-font-heading); font-stretch: 104%;
	color: var(--ekz-text-strong);
}
body.woocommerce-order-received table.woocommerce-table--order-details {
	width: 100%; border-collapse: collapse; border: 2px solid var(--ekz-border-subtle); border-radius: var(--ekz-radius-card); overflow: hidden;
}
body.woocommerce-order-received table.woocommerce-table--order-details th,
body.woocommerce-order-received table.woocommerce-table--order-details td {
	padding: var(--ekz-space-12) var(--ekz-space-16); border-bottom: 1px solid var(--ekz-border-subtle); text-align: left;
	font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.5 var(--ekz-font-body); color: var(--ekz-text-body);
}
body.woocommerce-order-received table.woocommerce-table--order-details thead th {
	background: var(--ekz-surface-sunken); font: var(--ekz-weight-semibold) var(--ekz-size-body-sm)/1.4 var(--ekz-font-core); color: var(--ekz-text-strong);
}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot th { font-weight: var(--ekz-weight-semibold); color: var(--ekz-text-strong); }
body.woocommerce-order-received table.woocommerce-table--order-details a { color: var(--ekz-text-strong); text-decoration: none; }
body.woocommerce-order-received table.woocommerce-table--order-details a:hover { color: var(--ekz-text-accent); }
/* Woo lays the two address columns out with floats and 48% widths inside
   .col2-set; the floats put the billing card on the right and pushed shipping
   onto a second row. Grid on the same element, floats cleared on the children. */
body.woocommerce-order-received .woocommerce-customer-details .col2-set {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ekz-gap);
}
body.woocommerce-order-received .woocommerce-customer-details .col2-set > .col-1,
body.woocommerce-order-received .woocommerce-customer-details .col2-set > .col-2 { width: auto; float: none; margin: 0; }
body.woocommerce-order-received .woocommerce-customer-details .col2-set::before,
body.woocommerce-order-received .woocommerce-customer-details .col2-set::after { content: none; }
body.woocommerce-order-received address {
	padding: var(--ekz-space-20); border: 2px solid var(--ekz-border-subtle); border-radius: var(--ekz-radius-card);
	background: var(--ekz-surface-sunken); font-style: normal;
	font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.7 var(--ekz-font-body); color: var(--ekz-text-body);
}
@media (max-width: 640px) {
	body.woocommerce-order-received .woocommerce-customer-details .col2-set { grid-template-columns: minmax(0, 1fr); }
}

/* "(voliteľné)" is wrong on the company block: those rows ARE required once the
   shopper says they are buying as a company (validated in inc/shop-checkout.php). */
body .ekz-checkout.ekz-checkout .ekz-company-field label .optional,
body .ekz-checkout.ekz-checkout .ekz-company-toggle label .optional { display: none; }

/* ============ 30. Certification block + Norma facet ====================== */
/*
 * The block a PPE buyer reads before the price. Norm families are chips (the
 * same shape as the size chips, but static — they are facts, not controls); the
 * per-class detail sits under them in one muted line, and the notified body and
 * certificate number close it as a two-column definition list.
 */
/* The panel (fill, frame, radius, padding) is the Shortcode widget's Advanced
 * fields since MAR-2485 (22-shop.php $cert_panel); this is only its markup.
 * Mechanics: a non-PPE product prints no certification, and the widget's empty
 * wrapper would otherwise show as an empty tinted box with a gap above it. */
body .ekz-cert { margin: 0; }
.elementor-widget.ekz-cert-wrap:not(:has(.ekz-cert)) { display: none; }
body .ekz-cert__title {
	margin: 0 0 var(--ekz-space-12);
	font: var(--ekz-weight-semibold) var(--ekz-size-body)/1.2 var(--ekz-font-core); color: var(--ekz-text-strong);
 text-transform: uppercase;
}
body .ekz-cert__norms { display: flex; flex-wrap: wrap; gap: var(--ekz-gap-tight); margin: 0; padding: 0; list-style: none; }
body .ekz-cert__norm {
	display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--ekz-space-12);
	background: var(--ekz-white); border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-chip);
	font: var(--ekz-weight-semibold) var(--ekz-size-body-sm)/1 var(--ekz-font-core); color: var(--ekz-text-strong);
	white-space: nowrap; cursor: help;
}
body .ekz-cert__detail {
	margin: var(--ekz-space-12) 0 0;
	font: var(--ekz-weight-regular) 12px/1.6 var(--ekz-font-body); color: var(--ekz-text-muted);
}
body .ekz-cert__meta {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ekz-gap-tight) var(--ekz-gap);
	margin: var(--ekz-gap) 0 0; padding: var(--ekz-gap) 0 0; border-top: 1px solid var(--ekz-border-subtle);
}
body .ekz-cert__meta dt {
	margin: 0; font: var(--ekz-weight-regular) var(--ekz-size-caption)/1.5 var(--ekz-font-body); color: var(--ekz-text-muted);
}
body .ekz-cert__meta dd {
	margin: 0; font: var(--ekz-weight-medium) var(--ekz-size-caption)/1.5 var(--ekz-font-core); color: var(--ekz-text-body);
	overflow-wrap: anywhere;
}

/* A norm facet can list ~40 terms on the unfiltered archive; cap it and scroll
   rather than pushing every other facet below the fold. */
body .ekz-facet__nav--scroll ul {
	max-height: 260px; overflow-y: auto; padding-right: var(--ekz-space-8);
	scrollbar-width: thin; scrollbar-color: var(--ekz-border-strong) transparent;
}
body .ekz-facet__nav--scroll ul::-webkit-scrollbar { width: 6px; }
body .ekz-facet__nav--scroll ul::-webkit-scrollbar-thumb { background: var(--ekz-border-strong); border-radius: var(--ekz-radius-pill); }

/* ============ 31. Môj účet (bundle AccountPage) ========================== */
/*
 * Two states: logged out is two form cards side by side (WooCommerce's own
 * markup, only boxed and spaced); logged in is a left rail of endpoints beside
 * the content, which is what the manual draws.
 */
body .ekz-account .u-columns.col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ekz-gap); }
/* Woo's float clearfix (::before/::after, content " ") becomes two GRID ITEMS
   here: the first took cell one, so "Prihlásenie" landed in the right column
   and "Registrácia" a row lower on the left (measured: x 732 / x 40, tops 309 /
   734 — MAR-1634 P06, diagnosed by Astra). Same fix as the thank-you page. */
body .ekz-account .u-columns.col2-set::before,
body .ekz-account .u-columns.col2-set::after { content: none; }
body .ekz-account .u-columns.col2-set > .col-1,
body .ekz-account .u-columns.col2-set > .col-2 { width: auto; float: none; }
/* Heading inside the card, 24 above the first field — the checkout's pattern
   (MAR-1634 P06/H01). The COLUMN is the card (section 35), so "Prihlásenie" and its
   form are one object; the heading used to stand above a card that started 16px
   lower, and the card had no shadow. */
body .ekz-account h2 {
	margin: 0 0 var(--ekz-gap);
	font: var(--ekz-weight-heading) var(--ekz-size-h4)/1.25 var(--ekz-font-heading); font-stretch: 104%;
	color: var(--ekz-text-strong);
}
body .ekz-account form.login,
body .ekz-account form.register {
	margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
}
/* Rows 24 apart like every form (F01), with one owner: the row's own bottom
   margin (MAR-1634). They were 16; Woo's 3px row padding inset every field 3px
   from the heading; and the last paragraph kept its margin, so the card bottoms
   were 48 and 40 instead of the card's 24. */
body .ekz-account :is(form.login, form.register) .form-row { margin: 0 0 var(--ekz-gap); padding: 0; }
body .ekz-account :is(form.login, form.register) > p:last-of-type { margin-bottom: 0; }
/* Label → field 12, as in the checkout and the Elementor forms (MAR-1634). Woo's
   `.woocommerce form .form-row label { line-height: 2 }` (0,3,1) left the label
   touching its field with ~8px of line leading as the only space. */
body .ekz-account :is(form.login, form.register) .form-row label:not(.woocommerce-form-login__rememberme) { display: block; margin: 0 0 var(--ekz-gap-tight); line-height: 1.3; }
/* Button and "Zapamätať si ma" on one row, 24 apart, the box centred on its text.
   Woo floats the button with a 1em right margin; with our 16 on the label that was
   31, and at 390 the label wrapped above the button. The row is found by its
   submit button: `:has(button)` also matches the password row, whose
   show-password eye is a <button>. */
body .ekz-account form.login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ekz-gap); }
/* Woo's clearfix (::before/::after, content " ") would be two more flex items,
   each bringing its own 24 gap — the button and the label measured 48 apart. */
body .ekz-account form.login .form-row:has(.woocommerce-form-login__submit)::before,
body .ekz-account form.login .form-row:has(.woocommerce-form-login__submit)::after { content: none; }
body .ekz-account form.login .woocommerce-form-login__submit { order: -1; float: none; margin: 0; }
/* Scoped through .form-row to outrank Woo's `.woocommerce form .form-row label`
   (0,3,1), which kept the label a block: the box then sat on the text's baseline,
   8px above its middle. */
body .ekz-account form.login .form-row .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: var(--ekz-gap-tight); margin: 0; }

/* Logged in: endpoint rail + panel. */
body .ekz-account .woocommerce-MyAccount-navigation { float: none; width: auto; }
body .ekz-account .woocommerce-MyAccount-content { float: none; width: auto; }
body.woocommerce-account.logged-in .ekz-account .woocommerce {
	display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--ekz-gap); align-items: start;
}
/* The float clearfix on .woocommerce (content " ", display table) is a grid item too: it took the
   240px cell, the menu fell into the wide column and the content into the next row's narrow one
   (Maroš, 2026-10-18). No clearfix in a grid; and the two parts are placed by name, so any other
   child (a notice) spans the row instead of shifting them. */
body.woocommerce-account.logged-in .ekz-account .woocommerce::before,
body.woocommerce-account.logged-in .ekz-account .woocommerce::after { content: none; display: none; }
body.woocommerce-account.logged-in .ekz-account .woocommerce > * { grid-column: 1 / -1; }
body.woocommerce-account.logged-in .ekz-account .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; }
body.woocommerce-account.logged-in .ekz-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; }
body .ekz-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ekz-gap-tight); }
body .ekz-account .woocommerce-MyAccount-navigation li a {
	display: block; padding: var(--ekz-space-10) var(--ekz-space-14); border-radius: var(--ekz-radius-sm);
	font: var(--ekz-weight-medium) var(--ekz-size-body-sm)/1.4 var(--ekz-font-core); color: var(--ekz-text-body); text-decoration: none;
	transition: var(--ekz-transition-color);
}
body .ekz-account .woocommerce-MyAccount-navigation li a:hover { background: var(--ekz-surface-sunken); color: var(--ekz-text-strong); }
body .ekz-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--ekz-green-50); color: var(--ekz-green-800); font-weight: var(--ekz-weight-semibold); }

/* Orders table — the same shape as the order-details table on the thank-you page. */
body .ekz-account table.woocommerce-orders-table,
body .ekz-account table.shop_table {
	width: 100%; border-collapse: collapse; border: 2px solid var(--ekz-border-subtle); border-radius: var(--ekz-radius-card); overflow: hidden;
}
body .ekz-account table.shop_table th,
body .ekz-account table.shop_table td {
	padding: var(--ekz-space-12) var(--ekz-space-16); border-bottom: 1px solid var(--ekz-border-subtle); text-align: left;
	font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.5 var(--ekz-font-body); color: var(--ekz-text-body);
}
body .ekz-account table.shop_table thead th {
	background: var(--ekz-surface-sunken); font: var(--ekz-weight-semibold) var(--ekz-size-body-sm)/1.4 var(--ekz-font-core); color: var(--ekz-text-strong);
}
/* Utility buttons inside the orders table only. `.woocommerce-Button` (capital B)
   used to be listed here too — but Woo puts that class on FORM SUBMITS (register,
   save account details, reset password), so "Registrovať sa" rendered as a white
   utility button beside a primary "Prihlásiť" and turned green only on hover
   (MAR-1634 B01). Submits now take the primary button like login. */
body .ekz-account .woocommerce-orders-table__cell-order-actions .button {
	display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--ekz-space-14);
	background: var(--ekz-white); color: var(--ekz-text-strong); border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-button);
	font: var(--ekz-weight-semibold) var(--ekz-size-caption)/1 var(--ekz-font-core); text-decoration: none;
}
body .ekz-account .woocommerce-info,
body .ekz-account .woocommerce-message {
	background: var(--ekz-surface-sunken); border: 2px solid var(--ekz-border-subtle); border-radius: var(--ekz-radius-md);
	padding: var(--ekz-space-14) var(--ekz-space-16); margin: 0 0 var(--ekz-space-20);
	font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.5 var(--ekz-font-body); color: var(--ekz-text-body);
}
body .ekz-account .woocommerce-info::before,
body .ekz-account .woocommerce-message::before { content: none; }

@media (max-width: 860px) {
	body .ekz-account .u-columns.col2-set { grid-template-columns: minmax(0, 1fr); gap: var(--ekz-gap); }
	body.woocommerce-account.logged-in .ekz-account .woocommerce { grid-template-columns: minmax(0, 1fr); gap: var(--ekz-gap); }
	body.woocommerce-account.logged-in .ekz-account .woocommerce > .woocommerce-MyAccount-navigation,
	body.woocommerce-account.logged-in .ekz-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 1 / -1; }
}

/* Long facets scroll instead of burying the rest of the panel.
 *
 * At full catalogue size Farba lists ~120 terms and Séria ~120 — the sidebar
 * became four times the height of the products it filters. The list facets get
 * the same cap as Norma; the size chips stay open because they are short and
 * wrap. Applied by the list style rather than per attribute, so a new facet is
 * capped by default. */
body .ekz-facet__nav--list ul,
body .ekz-facet__nav--scroll ul {
	max-height: 260px; overflow-y: auto; padding-right: var(--ekz-space-8);
	scrollbar-width: thin; scrollbar-color: var(--ekz-border-strong) transparent;
}
body .ekz-facet__nav--list ul::-webkit-scrollbar,
body .ekz-facet__nav--scroll ul::-webkit-scrollbar { width: 6px; }
body .ekz-facet__nav--list ul::-webkit-scrollbar-thumb,
body .ekz-facet__nav--scroll ul::-webkit-scrollbar-thumb { background: var(--ekz-border-strong); border-radius: var(--ekz-radius-pill); }

/* ============ 32. Cart on mobile ========================================= */
/*
 * WooCommerce has its own mobile treatment for cart tables — shop_table_responsive
 * turns every cell into a right-aligned block and prints the column header back
 * in front of it as `content: attr(data-title) ": "`. On top of the grid from
 * section 27 that produced "Produkt: … Počet: … Medzisúčet:" stacked over each
 * other, and the row overflowed the viewport.
 *
 * The labels go, the alignment override is undone (Woo sets it !important, so
 * this has to as well), and the row becomes the two-line layout the manual uses
 * on narrow screens: photo | name+meta | trash, then quantity and line total.
 * Breakpoint is 768px because that is where Woo's own rules start, not 640.
 */
@media (max-width: 768px) {
	body .ekz-cart.ekz-cart table.shop_table_responsive tr td::before,
	body .ekz-cart.ekz-cart table.shop_table_responsive tbody th::before,
	body .ekz-cart.ekz-cart .cart_totals table.shop_table_responsive tr th::before,
	body .ekz-cart.ekz-cart .cart_totals table.shop_table_responsive tr td::before { content: none; display: none; }

	body .ekz-cart.ekz-cart table.shop_table_responsive tbody tr td { text-align: left !important; padding-left: 0; }
	body .ekz-cart.ekz-cart table.shop_table_responsive tbody tr { display: grid; }

	body .ekz-cart.ekz-cart tr.woocommerce-cart-form__cart-item {
		/* Third column is `auto`, not 32px: the trash icon and the line total share
		   it, and a fixed 32px pushed the price off the right edge of the phone. */
		grid-template-columns: 64px minmax(0, 1fr) auto;
		grid-template-areas: "img name remove" "img qty total";
		column-gap: var(--ekz-gap-tight); row-gap: var(--ekz-gap-tight); align-items: center;
	}
	body .ekz-cart.ekz-cart td.product-thumbnail { grid-area: img; align-self: start; }
	body .ekz-cart.ekz-cart table.shop_table td.product-thumbnail img { width: 64px; height: 64px; }
	body .ekz-cart.ekz-cart td.product-name { grid-area: name; }
	body .ekz-cart.ekz-cart td.product-quantity { grid-area: qty; }
	body .ekz-cart.ekz-cart td.product-subtotal { grid-area: total; text-align: right !important; align-self: center; }
	body .ekz-cart.ekz-cart td.product-remove { grid-area: remove; text-align: right !important; align-self: start; }

	body .ekz-cart.ekz-cart .cart_totals table.shop_table_responsive tr { display: flex; }
	body .ekz-cart.ekz-cart .cart_totals table.shop_table_responsive tr td { text-align: right !important; }
	body .ekz-cart.ekz-cart .cart_totals table.shop_table_responsive tr th { text-align: left !important; }

	/*
	 * The cart scrolled sideways by 31px at 390 (MAR-1634, audit + diag-overflow:
	 * td.actions 377px wide in 302px of card). The row itself wrapped, but the
	 * coupon pair inside it — field + "Použiť kupón" — stayed on one line and set
	 * the cell's minimum width. On a phone the pair stacks, and every piece may
	 * shrink to the cell; nothing hides the overflow, it simply stops existing.
	 */
	body .ekz-cart.ekz-cart td.actions { flex-wrap: wrap; width: 100%; min-width: 0; box-sizing: border-box; }
	body .ekz-cart.ekz-cart td.actions .coupon { flex: 1 1 100%; flex-direction: column; min-width: 0; }
	body .ekz-cart.ekz-cart td.actions .coupon input#coupon_code,
	body .ekz-cart.ekz-cart td.actions .coupon button {
		width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
	}
	body .ekz-cart.ekz-cart td.actions button[name="update_cart"] { margin-left: 0; width: 100%; }

	/* The quantity stepper is 52px tall by design; at 390px it has to share the
	   row with the line total, so the box shrinks rather than pushing it out. */
	body .ekz-cart.ekz-cart td.product-quantity .quantity { max-width: 152px; }
}

/* The checkout summary uses the same responsive table. */
@media (max-width: 768px) {
	body .ekz-checkout.ekz-checkout table.shop_table_responsive tr td::before,
	body .ekz-checkout.ekz-checkout table.shop_table_responsive tr th::before { content: none; display: none; }
	body .ekz-checkout.ekz-checkout table.shop_table_responsive tbody tr td { text-align: left !important; padding-left: 0; }
	body .ekz-checkout.ekz-checkout tbody tr.cart_item td.product-total { text-align: right !important; }
	body .ekz-checkout.ekz-checkout table.woocommerce-checkout-review-order-table tfoot tr td { text-align: right !important; }
	body .ekz-checkout.ekz-checkout table.woocommerce-checkout-review-order-table tfoot tr th { text-align: left !important; }
}

/* The stepper, wherever WooCommerce prints a quantity input.
 *
 * Section 24 scoped it to .ekz-addtocart, which is the product page's buy row —
 * so on the cart page the same minus/plus buttons rendered as two unstyled
 * boxes that wrapped onto a second line. The cart's box is 44px tall (a table
 * row, not a buy row beside a 52px button); everything else is identical. */
body .ekz-cart.ekz-cart td.product-quantity .quantity {
	display: inline-flex; align-items: center; height: 44px; flex: 0 0 auto; width: auto; margin: 0;
	border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-input);
	background: var(--ekz-white); overflow: hidden;
}
body .ekz-cart.ekz-cart td.product-quantity .quantity input.qty {
	flex: 0 0 40px; width: 40px; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
	text-align: center; font: var(--ekz-weight-semibold) 15px/1 var(--ekz-font-core); color: var(--ekz-text-strong);
	-moz-appearance: textfield; appearance: textfield; min-width: 0;
}
body .ekz-cart.ekz-cart td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
body .ekz-cart.ekz-cart td.product-quantity .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body .ekz-cart.ekz-cart td.product-quantity .quantity input.qty:focus { outline: none; box-shadow: none; }
body .ekz-cart.ekz-cart td.product-quantity .ekz-qty__btn,
body .ekz-cart.ekz-cart td.product-quantity .ekz-qty__btn:hover,
body .ekz-cart.ekz-cart td.product-quantity .ekz-qty__btn:focus,
body .ekz-cart.ekz-cart td.product-quantity .ekz-qty__btn:active {
	flex: 0 0 40px; width: 40px; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
	display: inline-flex; align-items: center; justify-content: center;
	background: none; color: var(--ekz-text-body); cursor: pointer;
}
body .ekz-cart.ekz-cart td.product-quantity .ekz-qty__btn:disabled { opacity: .35; cursor: default; }
body .ekz-cart.ekz-cart td.product-quantity .quantity:focus-within { border-color: var(--ekz-action-primary); }

/* "Aktualizovať košík" is disabled until a quantity changes, and Woo only fades
   it — on the green button that left white text on light green, unreadable. It
   is the no-JS fallback (the page normally presses it itself), so it reads as a
   quiet secondary action rather than a second primary one. */
body .ekz-cart.ekz-cart td.actions button[name="update_cart"] {
	background: var(--ekz-white); color: var(--ekz-text-body); border: 2px solid var(--ekz-border-default);
}
body .ekz-cart.ekz-cart td.actions button[name="update_cart"]:hover:not(:disabled) {
	border-color: var(--ekz-border-default); background: var(--ekz-surface-sunken); color: var(--ekz-text-strong);
}
body .ekz-cart.ekz-cart td.actions button[name="update_cart"]:disabled {
	opacity: 1; color: var(--ekz-text-faint); background: var(--ekz-surface-sunken); border-color: var(--ekz-border-subtle); cursor: default;
}

/* Phone widths. The row placement above is set on IDs, so the class-based
   mobile rules never reached it — a real street name does not fit a third of a
   390px screen. Street goes full width, town and postcode share a row. */
@media (max-width: 640px) {
	body .ekz-checkout.ekz-checkout #billing_address_1_field,
	body .ekz-checkout.ekz-checkout #billing_company_field,
	body .ekz-checkout.ekz-checkout #billing_ic_dph_field { grid-column: span 6; }
	body .ekz-checkout.ekz-checkout #billing_city_field,
	body .ekz-checkout.ekz-checkout #billing_postcode_field,
	body .ekz-checkout.ekz-checkout #billing_ico_field,
	body .ekz-checkout.ekz-checkout #billing_dic_field { grid-column: span 3; }
}
/* E-mail and phone each take the row on a phone: at 390 a half row is 133px and
   an ordinary address (meno.priezvisko@firma.sk) ran past the field's edge
   while being typed (MAR-2494). Names, town + postcode stay in pairs. */
@media (max-width: 480px) {
	body .ekz-checkout.ekz-checkout #billing_email_field,
	body .ekz-checkout.ekz-checkout #billing_phone_field { grid-column: span 6; }
}

/* Size-guide link on the size row, and the third product tab's list. */
body .ekz-varpick__guide {
	margin-left: auto; font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1 var(--ekz-font-body);
	color: var(--ekz-text-link); text-decoration: underline; text-underline-offset: 2px;
}
body .ekz-varpick__guide:hover { color: var(--ekz-text-link-hover); }
body .variations tr th label { display: flex; align-items: baseline; gap: var(--ekz-gap-tight); }
body .ekz-tabs .ekz-tab-list { margin: 0; padding: 0 0 0 1.1em; list-style: disc; }
body .ekz-tabs .ekz-tab-list li { margin: 0 0 var(--ekz-space-8); font: var(--ekz-weight-regular) var(--ekz-size-body)/1.6 var(--ekz-font-body); color: var(--ekz-text-body); }
/* Links inside running text carry an underline, not colour alone (WCAG 1.4.1,
   MAR-2542 — Lighthouse flagged the Doprava tab's links). Elementor has no field
   for link decoration, so this one stays a rule. */
body .ekz-tab-list a,
body .ekz-prose p a,
body .ekz-prose li a,
body.single-product .woocommerce-product-details__short-description a,
body.single-product .elementor-widget-woocommerce-product-content a { text-decoration: underline; text-underline-offset: 2px; }
/* Size table (MAR-1634 P02): 12/24 cells, hairline rows, no zebra — Hello's
   `tbody > tr:nth-child(odd) > td` tint was a stray grey band on every other row. */
body .ekz-sizetable { width: 100%; border-collapse: collapse; margin: 0 0 var(--ekz-space-24); }
body .ekz-sizetable th, body .ekz-sizetable td {
	/* Hello frames every cell (`table td { border: 1px solid … }`); rows only here. */
	padding: var(--ekz-space-12) var(--ekz-gap); border: 0; border-bottom: 1px solid var(--ekz-border-subtle); text-align: left; vertical-align: top;
	background: none;
	font: var(--ekz-weight-regular) var(--ekz-size-body)/1.6 var(--ekz-font-body); color: var(--ekz-text-body);
}
body .ekz-sizetable th { width: 220px; font-weight: var(--ekz-weight-bold); color: var(--ekz-text-strong); }
/* Hello's zebra is `table tbody > tr:nth-child(odd) > td` (0,1,4) plus a hover
   tint (0,2,4) — both outrank a plain cell rule, so they are answered by name. */
body table.ekz-sizetable tbody tr > th, body table.ekz-sizetable tbody tr > td,
body table.ekz-sizetable tbody tr:hover > th, body table.ekz-sizetable tbody tr:hover > td { background: none; }
/* On a phone the 220px label left the explanation a narrow strip: 35 / 65, 12. */
@media (max-width: 768px) {
	body .ekz-sizetable th, body .ekz-sizetable td { padding: var(--ekz-space-12); overflow-wrap: anywhere; }
	body .ekz-sizetable th { width: 35%; }
}
/* Waist → EU grid (MAR-2705): six number columns, so no label column width; it
 * scrolls inside its own box rather than pushing the page sideways on a phone. */
body .ekz-sizetable-wrap { overflow-x: auto; margin: 0 0 var(--ekz-space-24); }
body .ekz-sizetable--grid { margin: 0; }
body .ekz-sizetable--grid th, body .ekz-sizetable--grid td { width: auto; padding: var(--ekz-space-8) var(--ekz-gap-tight); text-align: center; vertical-align: middle; overflow-wrap: normal; }
body .ekz-sizetable--grid thead th { font: var(--ekz-weight-semibold) var(--ekz-size-caption)/1.3 var(--ekz-font-body); color: var(--ekz-text-strong); }
body .ekz-sizetable--grid thead tr:last-child th, body .ekz-sizetable--grid thead th[rowspan] { border-bottom-width: 2px; }
body .ekz-sizetable--grid tbody th small { display: block; font: var(--ekz-weight-regular) var(--ekz-size-caption)/1.3 var(--ekz-font-body); color: var(--ekz-text-muted); white-space: nowrap; }
@media (max-width: 768px) {
	body .ekz-sizetable--grid th, body .ekz-sizetable--grid td { padding: var(--ekz-space-8) 4px; font-size: var(--ekz-size-body-sm); }
	body .ekz-sizetable--grid thead th { font-size: 12px; }
}

/* The size facet is chips, so it wraps rather than listing — but the full
   catalogue ships ~50 sizes (XS..8XL plus waists 26-58 plus shoe 34-52) and it
   ran to 500px on its own. Same cap, and the chips keep wrapping inside it. */
body .ekz-facet__nav--chips ul {
	max-height: 220px; overflow-y: auto; padding-right: var(--ekz-space-8);
	scrollbar-width: thin; scrollbar-color: var(--ekz-border-strong) transparent;
}
body .ekz-facet__nav--chips ul::-webkit-scrollbar { width: 6px; }
body .ekz-facet__nav--chips ul::-webkit-scrollbar-thumb { background: var(--ekz-border-strong); border-radius: var(--ekz-radius-pill); }

/* ============ 33. Maroš's review round, 2026-09-05 ======================= */

/* --- product page: price range on one line, real colours ----------------- */
/* The range is amount · dash · amount, and the net-price suffix goes to its
   own line under it; the column layout from §16 stacked all three. */
/* margin 0: the price is a <p>, so Theme Style's paragraph spacing (24) sat under
   it and price → description measured 48 (MAR-1634). */
body .ekz-price .price { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ekz-gap-tight); margin: 0; }
body .ekz-price .price .woocommerce-price-suffix { flex-basis: 100%; }
/* WooCommerce colours the chosen variation's price and stock with its own
   highlight (rgb 149 142 9 — the olive from the kit's hi-vis swatch). Price is
   ink, stock is the same green dot + text as the cards. */
body .ekz-addtocart .woocommerce-variation-price .price,
body .ekz-addtocart .woocommerce-variation-price .price .woocommerce-Price-amount { color: var(--ekz-price-main); }
body .ekz-addtocart .woocommerce-variation-price .price .woocommerce-price-suffix { color: var(--ekz-price-secondary); }
body .ekz-addtocart .woocommerce-variation-availability .stock {
	display: inline-flex; align-items: center; gap: var(--ekz-gap-tight); margin: 0;
	font: var(--ekz-weight-semibold) 13px/1.3 var(--ekz-font-core); color: var(--ekz-stock-in-text);
}
body .ekz-addtocart .woocommerce-variation-availability .stock::before { content: ''; width: 7px; height: 7px; border-radius: var(--ekz-radius-pill); background: var(--ekz-stock-in); flex: 0 0 auto; }
body .ekz-addtocart .woocommerce-variation-availability .stock.out-of-stock { color: var(--ekz-stock-out-text); }
body .ekz-addtocart .woocommerce-variation-availability .stock.out-of-stock::before { background: var(--ekz-stock-out); }
body .ekz-addtocart .woocommerce-variation-availability .stock.available-on-backorder { color: var(--ekz-stock-transit-text); }
body .ekz-addtocart .woocommerce-variation-availability .stock.available-on-backorder::before { background: var(--ekz-stock-transit); }

/* --- product page: sticky photo, stacked content sections ---------------- */
/* The gallery | summary split and its align-items are Grid container fields on
 * #wcsinglebody since MAR-2484 (22-shop.php), no longer .ekz-grid-product. */
body .ekz-product__gallery { position: sticky; top: var(--ekz-space-24); }
body .ekz-product__section { padding-top: var(--ekz-space-24); border-top: 1px solid var(--ekz-border-subtle); }
body .ekz-product__section .ekz-h4 { margin: 0; }
body .ekz-product__section .ekz-prose p { margin: 0 0 var(--ekz-space-12); font: var(--ekz-weight-regular) var(--ekz-size-body)/1.65 var(--ekz-font-body); color: var(--ekz-text-body); }
body .ekz-product__section .ekz-prose p:last-child { margin-bottom: 0; }
/* Rows and table stay a table on phones too: woocommerce-smallscreen.css makes
   every <tr> a block below 768px, so each row became its own anonymous table with
   its own column widths and a rule of its own length (Maroš, iPhone, 2026-10-17).
   Woo's dotted top border goes with it. */
body .ekz-params table.woocommerce-product-attributes { display: table; width: 100%; border-collapse: collapse; margin: 0; border: 0; }
body .ekz-params table.woocommerce-product-attributes tbody { display: table-row-group; }
body .ekz-params table.woocommerce-product-attributes tr { display: table-row; }
body .ekz-params table.woocommerce-product-attributes th,
body .ekz-params table.woocommerce-product-attributes td {
	/* 12 over and under each row, the label 24 clear of its value (MAR-1634 P02). */
	padding: var(--ekz-space-12) 0; border: 0; border-bottom: 1px solid var(--ekz-border-subtle); background: none; text-align: left; vertical-align: top;
	font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.5 var(--ekz-font-body); color: var(--ekz-text-body);
	/* Label beside value on phones too. woocommerce-smallscreen.css turns these
	   cells into blocks below 768px, and the table read as a stack of labels each
	   with a 110px underline (MAR-2494, measured at 390). */
	display: table-cell;
}
body .ekz-params table.woocommerce-product-attributes th { width: 38%; padding-right: var(--ekz-gap); font-weight: var(--ekz-weight-bold); color: var(--ekz-text-strong); }
/* Woo pads the value's <p> by 8px, which dropped every value below its label. */
body .ekz-params table.woocommerce-product-attributes td p { margin: 0; padding: 0; }
/* No zebra: Woo tints even rows with `.woocommerce table.shop_attributes
   tr:nth-child(even) td` (0,3,3); hairlines separate the rows. */
body .ekz-params table.woocommerce-product-attributes tr:nth-child(even) th,
body .ekz-params table.woocommerce-product-attributes tr:nth-child(even) td { background: none; }
body .ekz-params .woocommerce-product-attributes-item--attribute_pa_farba td,
body .ekz-params .woocommerce-product-attributes-item--attribute_pa_velkost td { overflow-wrap: anywhere; }
body .ekz-docs { display: flex; flex-wrap: wrap; gap: var(--ekz-gap-tight) var(--ekz-gap); margin: 0; padding: 0; list-style: none; }
body .ekz-docs a {
	display: inline-flex; align-items: center; gap: var(--ekz-gap-tight);
	font: var(--ekz-weight-medium) var(--ekz-size-body-sm)/1.3 var(--ekz-font-core); color: var(--ekz-text-link); text-decoration: none;
}
/* Colour only, like every other link: hover never adds or removes an underline
   (MAR-1634 L01 — the documents were the one list that grew one). */
body .ekz-docs a:hover { color: var(--ekz-text-link-hover); }
body .ekz-sizechart { margin: 0 0 var(--ekz-space-24); }
body .ekz-sizechart img { display: block; width: 100%; height: auto; border: 2px solid var(--ekz-border-subtle); border-radius: var(--ekz-radius-card); transition: var(--ekz-transition-card); }
/* The chart opens full size: a link, so the card hover (MAR-1634, 2026-09-27). */
body .ekz-sizechart a:hover img { border-color: var(--ekz-accent); }
body .ekz-sizechart figcaption { margin-top: var(--ekz-gap-tight); font: var(--ekz-weight-regular) var(--ekz-size-caption)/1.4 var(--ekz-font-body); color: var(--ekz-text-muted); }
@media (max-width: 1024px) { body .ekz-product__gallery { position: static; } }

/* --- cart: the coupon row had a half-painted band behind it -------------- */
body .ekz-cart.ekz-cart table.shop_table.cart tr:not(.woocommerce-cart-form__cart-item),
body .ekz-cart.ekz-cart table.shop_table.cart tr:not(.woocommerce-cart-form__cart-item) td.actions { background: none; }
body .ekz-cart.ekz-cart td.actions .coupon input#coupon_code {
	min-height: 44px; padding: 0 var(--ekz-space-14); border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-input);
	background: var(--ekz-white); font: var(--ekz-weight-regular) var(--ekz-size-body)/1.4 var(--ekz-font-body); color: var(--ekz-text-strong);
}
/* Cart summary: the VAT note is one quiet line, the amount inside it is not a second headline. */
body .ekz-cart.ekz-cart .cart_totals tr.order-total small.includes_tax,
body .ekz-cart.ekz-cart .cart_totals tr.order-total small.includes_tax .woocommerce-Price-amount,
body .ekz-cart.ekz-cart .cart_totals tr.order-total small.includes_tax .woocommerce-Price-amount bdi,
body .ekz-checkout.ekz-checkout tfoot tr.order-total small.includes_tax,
body .ekz-checkout.ekz-checkout tfoot tr.order-total small.includes_tax .woocommerce-Price-amount,
body .ekz-checkout.ekz-checkout tfoot tr.order-total small.includes_tax .woocommerce-Price-amount bdi {
	font: var(--ekz-weight-regular) 12px/1.3 var(--ekz-font-body); font-stretch:100%;font-weight:400; color: var(--ekz-price-secondary);
}
body .ekz-checkout.ekz-checkout tfoot tr.order-total td { display: flex; flex-direction: column; align-items: flex-end; gap: var(--ekz-gap-tight); }

/* --- checkout: whole radio card is the control -------------------------- */
/* The <label> fills the card and the <li> loses its padding to it, so a click
   anywhere on the card lands on the label and thus on the radio. */
body .ekz-checkout.ekz-checkout #order_review ul#shipping_method li,
body .ekz-checkout.ekz-checkout ul.wc_payment_methods li.wc_payment_method { padding: 0; position: relative; }
body .ekz-checkout.ekz-checkout #order_review ul#shipping_method li label,
body .ekz-checkout.ekz-checkout ul.wc_payment_methods li.wc_payment_method > label {
	display: flex; width: 100%; box-sizing: border-box; cursor: pointer;
	/* 12/24, and the text clears the 18px radio pinned at 24 by the small step 12. */
	padding: var(--ekz-space-12) var(--ekz-gap) var(--ekz-space-12) calc(var(--ekz-gap) + 18px + var(--ekz-gap-tight));
}
/* Woo prints the payment radio as a sibling BEFORE the label; keep it in the
   card's flow but let the label carry the padding. */
body .ekz-checkout.ekz-checkout ul.wc_payment_methods li.wc_payment_method > input[type="radio"] {
	position: absolute; left: var(--ekz-gap); margin: 0;
}
body .ekz-checkout.ekz-checkout ul.wc_payment_methods li.wc_payment_method:last-child { margin-bottom: 0; }
/* The gateway's description reads as the row's second line, 12 under the title. */
body .ekz-checkout.ekz-checkout #payment div.payment_box {
	margin: 0; padding: 0 var(--ekz-gap) var(--ekz-space-12) calc(var(--ekz-gap) + 18px + var(--ekz-gap-tight));
}
/* With a single payment method Woo's checkout script hides its radio (there is
   nothing to choose), so the row drops the radio's indent as well. */
body .ekz-checkout.ekz-checkout #payment ul.wc_payment_methods li.wc_payment_method:has(> input[type="radio"][style*="none"]) > label,
body .ekz-checkout.ekz-checkout #payment ul.wc_payment_methods li.wc_payment_method:has(> input[type="radio"][style*="none"]) > div.payment_box { padding-left: var(--ekz-gap); }

/* The company identifiers used to sit on a tinted panel pieced together from
   negative margins sized for a 16px field gap; at 24 they left white stripes and
   unequal field widths. The "Nakupujem na firmu" tick already groups them, so they
   are ordinary fields now (MAR-1634 P05). */

/* "Ship elsewhere" and the order note are cards of their own (section 35); the
   ship-elsewhere heading is the tick, so it keeps no margin under it. */
body .ekz-checkout.ekz-checkout .woocommerce-shipping-fields h3 { margin: 0; }
body .ekz-checkout.ekz-checkout .woocommerce-shipping-fields #ship-to-different-address label {
	display: inline-flex; align-items: center; gap: var(--ekz-gap-tight); cursor: pointer;
	font: var(--ekz-weight-semibold) var(--ekz-size-body)/1.4 var(--ekz-font-core); color: var(--ekz-text-strong);
}
body .ekz-checkout.ekz-checkout .woocommerce-shipping-fields #ship-to-different-address input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--ekz-action-primary); }
/* Padding, not margin: Woo gives the address `clear: both`, and clearance
   swallowed a margin-top whole — the fields started right under the tick. */
body .ekz-checkout.ekz-checkout .woocommerce-shipping-fields .shipping_address { margin-top: 0; padding-top: var(--ekz-gap); }
body .ekz-checkout.ekz-checkout .woocommerce-additional-fields .form-row { margin: 0; }
body .ekz-checkout.ekz-checkout .woocommerce-additional-fields textarea { background: var(--ekz-white); }

/* The additional-information widget prints its own "Ďalšie informácie" h2
   regardless of its show_heading control; the section already has "Parametre". */
body .ekz-params > h2,
body .ekz-params .woocommerce-product-attributes-heading,
body .ekz-product__section .ekz-params h2 { display: none; }

/* Woo zeroes the payment rows with `#payment ul.payment_methods li { margin:0 }`
   — an ID selector, so the gap needs the ID too. 12, like the shipping rows. */
body .ekz-checkout.ekz-checkout #payment ul.payment_methods li.wc_payment_method { margin: 0 0 var(--ekz-gap-tight); }
body .ekz-checkout.ekz-checkout #payment ul.payment_methods li.wc_payment_method:last-child { margin-bottom: 0; }

/* Shipping rows: Woo prints the radio as a sibling before the label here too;
   pinned inside at 24, the label's padding clears it (rule above). */
body .ekz-checkout.ekz-checkout #order_review ul#shipping_method li input[type="radio"] {
	position: absolute; left: var(--ekz-gap); margin: 0;
}

/* Radio sits on the TITLE line of the row, whether or not the gateway's
   description is open below it. 12px padding + half of the 15px/1.35 title
   line − half of the 18px control = 13px. Same for shipping. */
body .ekz-checkout.ekz-checkout ul.wc_payment_methods li.wc_payment_method > input[type="radio"],
body .ekz-checkout.ekz-checkout #order_review ul#shipping_method li input[type="radio"] { top: 13px; transform: none; }
/* No focus square after a mouse click; keyboard focus keeps a ring via :focus-visible. */
body .ekz-checkout.ekz-checkout ul.wc_payment_methods li.wc_payment_method > input[type="radio"]:focus,
body .ekz-checkout.ekz-checkout #order_review ul#shipping_method li input[type="radio"]:focus { outline: none; box-shadow: none; }
body .ekz-checkout.ekz-checkout ul.wc_payment_methods li.wc_payment_method > input[type="radio"]:focus-visible,
body .ekz-checkout.ekz-checkout #order_review ul#shipping_method li input[type="radio"]:focus-visible { outline: 2px solid var(--ekz-focus-ring); outline-offset: 2px; }

/* --- checkout: the last stretch — privacy note, consent, button, trust ---- */
/* Three different things were stacked with no rhythm: legal note, a consent
   checkbox whose text wrapped under the box, and the button hard against it.
   Now: hairline, quiet note, the consent as its own small card (it IS a
   deliberate step), then the button with room to breathe. */
/* The one rhythm of the tail (MAR-1634 P05): payment rows · 24 · hairline · 24 ·
   privacy note · 12 · consent · 12 · order button · 12 · trust line. Each gap has
   one owner below; the older passes that restated them are gone. */
body .ekz-checkout.ekz-checkout #payment .woocommerce-privacy-policy-text {
	margin: var(--ekz-gap) 0 0; padding-top: var(--ekz-gap); border-top: 1px solid var(--ekz-border-subtle);
	font: var(--ekz-weight-regular) 12px/1.6 var(--ekz-font-body); color: var(--ekz-text-muted);
}
body .ekz-checkout.ekz-checkout #payment .woocommerce-privacy-policy-text a { color: var(--ekz-text-muted); text-decoration: underline; text-underline-offset: 2px; }
body .ekz-checkout.ekz-checkout #payment .woocommerce-privacy-policy-text a:hover { color: var(--ekz-text-accent); }
body .ekz-checkout.ekz-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin: 0; }
body .ekz-checkout.ekz-checkout #payment .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; padding: 0; }
/* Woo's `form .form-row label.checkbox { display:inline }` outranked the flex
   label from §28, which is why the text wrapped under the box. The consent is a
   choice row like payment and shipping: control border, 6, 12/24, sunken until
   ticked (MAR-1634 P05). */
body .ekz-checkout.ekz-checkout #payment .form-row label.woocommerce-form__label-for-checkbox {
	display: flex; align-items: flex-start; gap: var(--ekz-gap-tight); margin: 0; cursor: pointer;
	padding: var(--ekz-space-12) var(--ekz-gap);
	background: var(--ekz-surface-sunken); border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-sm);
	font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.5 var(--ekz-font-body); color: var(--ekz-text-body);
}
body .ekz-checkout.ekz-checkout #payment .form-row label.woocommerce-form__label-for-checkbox:has(input:checked) { border-color: var(--ekz-action-primary); background: var(--ekz-green-50); }
body .ekz-checkout.ekz-checkout #payment .form-row label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
	width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ekz-action-primary);
}
body .ekz-checkout.ekz-checkout #payment .form-row label.woocommerce-form__label-for-checkbox input[type="checkbox"]:focus { outline: none; box-shadow: none; }
body .ekz-checkout.ekz-checkout #payment .form-row label.woocommerce-form__label-for-checkbox .woocommerce-terms-and-conditions-checkbox-text { flex: 1 1 auto; }
body .ekz-checkout.ekz-checkout #payment .form-row label.woocommerce-form__label-for-checkbox a { color: var(--ekz-text-link); text-decoration: underline; text-underline-offset: 2px; }
body .ekz-checkout.ekz-checkout #payment .form-row label.woocommerce-form__label-for-checkbox a:hover { color: var(--ekz-text-link-hover); }
body .ekz-checkout.ekz-checkout #payment .form-row label.woocommerce-form__label-for-checkbox abbr.required { color: var(--ekz-danger-500); text-decoration: none; border: 0; margin-left: 2px; }

/* The required mark is a separate <abbr> after the text span, so as a flex item
   it flew to the card's right edge. Draw it at the end of the sentence instead. */
body .ekz-checkout.ekz-checkout #payment .form-row label.woocommerce-form__label-for-checkbox abbr.required { display: none; }
body .ekz-checkout.ekz-checkout #payment .form-row label.woocommerce-form__label-for-checkbox .woocommerce-terms-and-conditions-checkbox-text::after { content: ' *'; color: var(--ekz-danger-500); }

/* A single hairline — Woo's ul.payment_methods border-bottom drew a second one
   24px above ours — and no 1em indent: the rows sit flush with the shipping rows
   and the totals above them. */
body .ekz-checkout.ekz-checkout #payment ul.payment_methods { border-bottom: 0; padding: 0; margin-bottom: 0; }
body .ekz-checkout.ekz-checkout #place_order { margin-top: var(--ekz-gap-tight); }

/* Woo nests the privacy note INSIDE .woocommerce-terms-and-conditions-wrapper,
   next to the checkbox row — so the gap belongs on the checkbox row itself. */
body .ekz-checkout.ekz-checkout #payment .woocommerce-terms-and-conditions-wrapper .form-row.validate-required { margin-top: var(--ekz-gap-tight); }

/* Trust line 12 under the button, with the #payment weight Woo's own
   `.place-order p` margin reset carries. */
body .ekz-checkout.ekz-checkout #payment div.form-row.place-order .ekz-checkout__trust { margin: var(--ekz-gap-tight) 0 0; }
body .ekz-checkout.ekz-checkout #payment div.form-row.place-order #place_order { margin-bottom: 0; }

/* Woo floats the order button (`#place_order { float:right }`), so the trust
   line's margin-top measured from the container, not from the button — the two
   touched however large the margin was. Block, not float. */
body .ekz-checkout.ekz-checkout #payment div.form-row.place-order #place_order { float: none; display: block; width: 100%; }
body .ekz-checkout.ekz-checkout #payment div.form-row.place-order .ekz-checkout__trust { clear: both; }

/* Coupon (and login) forms that unfold under the toggles: same sunken panel as
   the other side-steps, field and button on one row with a gap, not a button
   glued under a full-width input. */
/* MAR-1634: inset 24, rows 24 apart (the coupon's field and button stay 12
   apart on their one row), 24 to the next toggle; drawn like the notice it
   unfolds from (1px border, radius 6). It was 16/20 inset, rows 12, 16 below,
   and sunken grey on the shop's grey page — a form with no panel around it. */
body .ekz-checkout.ekz-checkout form.checkout_coupon,
body .ekz-checkout.ekz-checkout form.woocommerce-form-login {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--ekz-gap) var(--ekz-gap-tight);
	margin: 0 0 var(--ekz-gap); padding: var(--ekz-gap);
	background: var(--ekz-surface-sunken); border: 2px solid var(--ekz-border-subtle); border-radius: var(--ekz-radius-md);
}
/* The intro sentence is a bare <p>; the coupon form has none, so :first-child
   would have hit the field row and stretched it across the panel. */
body .ekz-checkout.ekz-checkout form.checkout_coupon > p:not(.form-row),
body .ekz-checkout.ekz-checkout form.woocommerce-form-login > p:not(.form-row) {
	flex: 1 1 100%; margin: 0;
	font: var(--ekz-weight-regular) var(--ekz-size-body-sm)/1.4 var(--ekz-font-body); color: var(--ekz-text-muted);
}
body .ekz-checkout.ekz-checkout form.checkout_coupon .form-row,
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .form-row { float: none; width: auto; margin: 0; padding: 0; }
body .ekz-checkout.ekz-checkout form.checkout_coupon .form-row-first { flex: 1 1 240px; }
body .ekz-checkout.ekz-checkout form.checkout_coupon .form-row-last { flex: 0 0 auto; }
body .ekz-checkout.ekz-checkout form.checkout_coupon input#coupon_code,
body .ekz-checkout.ekz-checkout form.woocommerce-form-login input.input-text {
	width: 100%; min-height: 44px; padding: 0 var(--ekz-space-14); box-sizing: border-box;
	background: var(--ekz-white); border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-input);
	font: var(--ekz-weight-regular) var(--ekz-size-body)/1.4 var(--ekz-font-body); color: var(--ekz-text-strong);
}
/* Not the show-password eye inside the password field: it is a <button> too, and
   this made it a bordered white box (MAR-1634). */
body .ekz-checkout.ekz-checkout form.checkout_coupon button,
body .ekz-checkout.ekz-checkout form.woocommerce-form-login button:not(.show-password-input) {
	min-height: 44px; padding: 0 var(--ekz-space-20); white-space: nowrap;
	background: var(--ekz-white); color: var(--ekz-text-strong); border: 2px solid var(--ekz-border-default);
	border-radius: var(--ekz-radius-button); font: var(--ekz-weight-semibold) var(--ekz-size-body-sm)/1 var(--ekz-font-core);
}
body .ekz-checkout.ekz-checkout form.checkout_coupon button:hover,
body .ekz-checkout.ekz-checkout form.woocommerce-form-login button:not(.show-password-input):hover { border-color: var(--ekz-border-default); background: var(--ekz-surface-sunken); }
body .ekz-checkout.ekz-checkout form.checkout_coupon .clear,
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .clear { display: none; }
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .form-row { flex: 1 1 240px; }
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { flex: 1 1 100%; display: flex; gap: var(--ekz-gap); align-items: center; }
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .lost_password { flex: 1 1 100%; margin: 0; font-size: var(--ekz-size-body-sm); }

/* Login form: every row on its own line; Woo wraps the password input in
   span.password-input (for the eye toggle), which shrank to content width. */
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .form-row { flex: 1 1 100%; display: block; }
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .form-row label { display: block; margin: 0 0 var(--ekz-gap-tight); font: var(--ekz-weight-medium) var(--ekz-size-body-sm)/1.3 var(--ekz-font-core); color: var(--ekz-text-strong); }
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .password-input { display: block; width: 100%; position: relative; }
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .password-input input.input-text { width: 100%; padding-right: 44px; }
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .show-password-input { top: 50%; transform: translateY(-50%); right: 12px; margin: 0; }
/* The submit row, found by its submit button: `:has(button)` also matched the
   password row (the show-password eye is a <button>), which turned it into a flex
   row — label → field 24 against the username's 6, "Heslo" pushed 24px in and its
   asterisk 12px away (MAR-1634). */
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: flex; align-items: center; gap: var(--ekz-gap); flex-wrap: wrap; }
/* Woo's clearfix (::before/::after) would be two more flex items with a gap each,
   and Woo floats the button with a 1em right margin: button → label was 63. */
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit)::before,
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit)::after { content: none; }
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) label { display: inline-flex; align-items: center; gap: var(--ekz-gap-tight); margin: 0; font-weight: var(--ekz-weight-regular); color: var(--ekz-text-body); }
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--ekz-action-primary); }
body .ekz-checkout.ekz-checkout form.woocommerce-form-login .woocommerce-form-login__submit { order: -1; float: none; margin: 0; }

/* --- cart summary: shipping as the same radio cards as the checkout -------- */
/* "Doprava" becomes a section label on its own line, the methods stack as
   cards under it (Woo's table cell squeezed them beside the label). The
   "options will update at checkout" note and the destination line are Woo
   defaults that only make sense with a shipping calculator — SK-only shop,
   so both go. */
body .ekz-cart.ekz-cart .cart_totals table.shop_table tr.shipping { flex-direction: column; align-items: stretch; gap: var(--ekz-gap-tight); padding: 0; }
body .ekz-cart.ekz-cart .cart_totals table.shop_table tr.shipping th { text-align: left; }
body .ekz-cart.ekz-cart .cart_totals table.shop_table tr.shipping td { text-align: left; }
body .ekz-cart.ekz-cart .cart_totals ul#shipping_method { display: flex; flex-direction: column; gap: var(--ekz-gap-tight); }
/* The same choice row as the checkout (MAR-1634 P03/P05): control border, 6,
   12/24, the radio pinned at 24 on the title line (12 + 10 − 9 = 13). */
body .ekz-cart.ekz-cart .cart_totals ul#shipping_method li {
	position: relative; display: block; margin: 0; padding: 0;
	background: var(--ekz-white); border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-sm);
	transition: var(--ekz-transition-color);
}
body .ekz-cart.ekz-cart .cart_totals ul#shipping_method li:hover { border-color: var(--ekz-accent); }
body .ekz-cart.ekz-cart .cart_totals ul#shipping_method li:has(input:checked) { border-color: var(--ekz-action-primary); background: var(--ekz-green-50); }
body .ekz-cart.ekz-cart .cart_totals ul#shipping_method li input[type="radio"] {
	position: absolute; left: var(--ekz-gap); top: 13px; width: 18px; height: 18px; margin: 0; accent-color: var(--ekz-action-primary);
}
body .ekz-cart.ekz-cart .cart_totals ul#shipping_method li input[type="radio"]:focus { outline: none; box-shadow: none; }
body .ekz-cart.ekz-cart .cart_totals ul#shipping_method li input[type="radio"]:focus-visible { outline: 2px solid var(--ekz-focus-ring); outline-offset: 2px; }
body .ekz-cart.ekz-cart .cart_totals ul#shipping_method li label {
	display: flex; width: 100%; box-sizing: border-box; cursor: pointer; margin: 0;
	padding: var(--ekz-space-12) var(--ekz-gap) var(--ekz-space-12) calc(var(--ekz-gap) + 18px + var(--ekz-gap-tight));
	font: var(--ekz-weight-semibold) var(--ekz-size-body)/1.35 var(--ekz-font-core); color: var(--ekz-text-strong);
}
body .ekz-cart.ekz-cart .cart_totals ul#shipping_method li label .woocommerce-Price-amount { font: inherit; color: inherit; margin-left: var(--ekz-space-4); }
body .ekz-cart.ekz-cart .cart_totals .woocommerce-shipping-destination,
body .ekz-cart.ekz-cart .cart_totals .woocommerce-shipping-calculator,
body .ekz-cart.ekz-cart .cart_totals .woocommerce-shipping-contents { display: none; }

/* 34 · Legal forms — online odstúpenie od zmluvy, notices, sample form ------- */
/* The form, recap and receipt are agency-wp-kit's withdrawal module (MAR-2842,
   inc/akit-withdrawal.php; replaced inc/withdrawal.php). The module prints its own
   base style next to the form, after this file, so every rule here is one class
   deeper (`body .akit-wd …`). Plain HTML, no Elementor fields: rows 24, label →
   field 12, the control box and focus — the same values the Elementor forms get
   from their own fields (MAR-1634 F01). */
body .akit-wd { max-width: 640px; font: var(--ekz-weight-regular) var(--ekz-size-body) var(--ekz-font-body); color: var(--ekz-text-body); }
body .akit-wd .akit-wd-form { display: grid; gap: var(--ekz-gap); }
body .akit-wd .akit-wd-row { margin: 0; display: grid; gap: var(--ekz-gap-tight); }
body .akit-wd .akit-wd-row label { margin: 0; font: var(--ekz-weight-semibold) var(--ekz-size-body-sm) var(--ekz-font-body); color: var(--ekz-text-strong); }
body .akit-wd .akit-wd-req { color: var(--ekz-action-primary); }
body .akit-wd .akit-wd-field-error { margin: 0; color: var(--ekz-danger-700); font-size: var(--ekz-size-body-sm); }
/* 11 inside the 2px control border: the 47px field that 12 + 1px made (MAR-1634,
   2026-09-27). */
body .akit-wd .akit-wd-row :is(input, textarea) {
  width: 100%; padding: 11px; font: var(--ekz-weight-regular) var(--ekz-size-body)/1.4 var(--ekz-font-body);
  color: var(--ekz-text-body); background: var(--ekz-white); border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-input);
}
body .akit-wd .akit-wd-row :is(input, textarea):focus { border-color: var(--ekz-accent); box-shadow: 0 0 0 3px var(--ekz-focus-ring); outline: none; }
body .akit-wd .akit-wd-row :is(input, textarea)[aria-invalid="true"] { border-color: var(--ekz-danger-700); }
body .akit-wd :is(.akit-wd-intro, .akit-wd-pending, .akit-wd-next p) { margin: 0 0 var(--ekz-gap); }
body .akit-wd .akit-wd-pending { color: var(--ekz-text-strong); }
/* The recap's and receipt's own heading: the size of the page's h2 above it (ekz-h3). */
body .akit-wd .akit-wd-title { margin: 0 0 var(--ekz-gap); font-size: var(--ekz-size-h3); line-height: var(--ekz-lh-snug); }
body .akit-wd .akit-wd-summary { gap: var(--ekz-space-4) var(--ekz-gap); margin: 0 0 var(--ekz-gap); }
body .akit-wd .akit-wd-summary dt { color: var(--ekz-text-strong); font-size: var(--ekz-size-body-sm); }
body .akit-wd .akit-wd-actions { margin: 0; gap: var(--ekz-gap-tight); }
/* A plain <button>: Theme Style gives it the primary look but its own 1.5 line,
   which made it the one 49px button (MAR-1634 B01). 1.2 like every button → 44. */
/* Its border too: Theme Style sets none, so Hello's reset (`button { border: 1px
   solid #c36 }`) drew a pink frame round the green (MAR-1634, 2026-09-27). The
   primary buttons' 1px in their own fill, like the Elementor and Woo ones. */
body .akit-wd .akit-wd-button { line-height: 1.2; border: 1px solid transparent; }
/* „Upraviť údaje“ beside the confirm button: the secondary button (one 2px control
   border, 11/23 keeps it at 44 beside the primary's 1px). */
body .akit-wd .akit-wd-button.akit-wd-secondary { background: var(--ekz-white); color: var(--ekz-action-secondary-text); border: 2px solid var(--ekz-border-default); padding: 11px 23px; }
body .akit-wd .akit-wd-button.akit-wd-secondary:is(:hover, :focus) { background: var(--ekz-surface-sunken); color: var(--ekz-action-secondary-text); border-color: var(--ekz-border-default); }
/* A notice: nested 6, 12/24, white, one border; the status is the border colour. */
body .akit-wd .akit-wd-notice { padding: var(--ekz-space-12) var(--ekz-space-24); border-radius: var(--ekz-radius-sm); border: 2px solid var(--ekz-border-subtle); background: var(--ekz-white); color: var(--ekz-text-body); margin: 0 0 var(--ekz-gap); }
body .akit-wd .akit-wd-notice--success { border-color: var(--ekz-action-primary); }
body .akit-wd .akit-wd-notice--error { border-color: #B42318; color: #B42318; }
body .akit-wd .akit-wd-notice ul { margin: var(--ekz-space-4) 0 0; padding-left: 1.2em; }
body .akit-wd .akit-wd-notice a { color: inherit; }
.ekz-sample-form { padding: var(--ekz-space-24); border: 2px dashed var(--ekz-border-strong); border-radius: var(--ekz-radius-sm); background: var(--ekz-surface-sunken); line-height: 1.8; }
/* Items 12 apart, the list 24 from the text after it — as far as the text before
   it, which is the paragraph spacing (MAR-1634; were 8 and 12). */
.ekz-body ul { padding-left: 1.2em; margin: 0 0 var(--ekz-gap); }
.ekz-body ul li { margin-bottom: var(--ekz-gap-tight); }
.ekz-body ul li:last-child { margin-bottom: 0; }

/* ============ 35 · Shop surface — design system v2 (MAR-1567) ============= */
/*
 * Marketing pages and shop pages use opposite surface logic. On marketing pages
 * white is the page and ink-50 an occasional band; in the shop the page is ink-50
 * and every block that holds content is a white card floating on it.
 *
 * The reason is the photography: feed images are shot on white and rendered
 * `contain` on a white tile, so on a white page the grid dissolves into one field
 * and a 1px border is left doing all the work.
 *
 * Switched by the ekz-shop body class (functions.php) rather than by Woo's own
 * body classes, because /obchod/ and the Elementor shop templates do not all
 * carry the same Woo classes.
 */
body.ekz-shop { background: var(--ekz-surface-sunken); }

/* Blocks that hold content become white cards — one card per block, never a card
   inside a card (MAR-1634 P03/P04). In the cart that is the items form and the
   totals; the tables inside them are structure. In the checkout: billing,
   ship-elsewhere and the note on the left, the summary (heading + review) on the
   right. */
body.ekz-shop .e-con-full.ekz-facets,
body.ekz-shop .ekz-sortbar,
body.ekz-shop .ekz-product__summary,
body.ekz-shop .ekz-cart .woocommerce-cart-form,
body.ekz-shop .ekz-cart .cart-collaterals .cart_totals,
body.ekz-shop .ekz-checkout .woocommerce-billing-fields,
body.ekz-shop .ekz-checkout .woocommerce-shipping-fields,
body.ekz-shop .ekz-checkout .woocommerce-additional-fields,
body.ekz-shop .ekz-checkout .ekz-checkout__summary,
body.ekz-shop .ekz-account .u-columns.col2-set > .u-column1,
body.ekz-shop .ekz-account .u-columns.col2-set > .u-column2,
body.ekz-shop .ekz-cart .woocommerce:has(> .wc-empty-cart-message),
body.ekz-shop .ekz-account .woocommerce-MyAccount-navigation,
body.ekz-shop .ekz-account .woocommerce-MyAccount-content {
	background: var(--ekz-surface-raised);
	/* 2px — one border weight for every card and panel (MAR-1634, 2026-09-27).
	   Passive panels: no hover (MAR-1635 Q06). */
	border: 2px solid var(--ekz-border-subtle);
	border-radius: var(--ekz-radius-card);
	box-shadow: var(--ekz-shadow-1);
	padding: var(--ekz-space-24);
}
/* The facet column stays sticky; the card only gives it an edge. */
body.ekz-shop .e-con-full.ekz-facets { top: var(--ekz-space-24); }

/* Dealer seal + sorting, full content width above the catalogue (MAR-1619).
   Deliberately NOT one of the white cards above: it is a line of page
   furniture, and giving it a panel would put a third competing surface between
   the tiles and the products. */
.ekz-trustbar { margin-block: var(--ekz-gap); }
/* The Icon List is a block-level widget, so without this it claims the whole
   row and pushes the sort control onto a second line. */
.ekz-trustbar .elementor-widget-icon-list { width: auto; }
body .ekz-trust .elementor-icon-list-item,
body .ekz-trust .elementor-icon-list-text {
	font-size: var(--ekz-size-body-sm); color: var(--ekz-text-muted); line-height: 1.2;
}
body .ekz-trust .elementor-icon-list-text strong { color: var(--ekz-text-body); font-weight: var(--ekz-weight-bold); }
body .ekz-trust .elementor-icon-list-icon svg,
body .ekz-trust .elementor-icon-list-icon i { color: var(--ekz-accent); font-size: 16px; }
/*
 * Below the drawer breakpoint the row holds a third item: "Filtre", which
 * ekz-filters.js puts right before the sort control. The two tools sit side by
 * side, 12 apart and both 44 high (Maroš, MAR-1634, 2026-09-27) — they used to
 * be stacked, the button in the grid under this row. On a tablet the seal stays
 * on their left; on a phone it takes its own line and the select takes the rest
 * of the second one, wide enough to read its option. 1024 included: the catalogue
 * is one column there, so the drawer and its button are too (MAR-1727).
 */
@media (max-width: 1024px) {
	.ekz-trustbar > .e-con-inner { flex-wrap: wrap; column-gap: var(--ekz-gap-tight); }
	.ekz-trustbar .elementor-widget-icon-list { margin-inline-end: auto; }
}
@media (max-width: 767px) {
	.ekz-trustbar .elementor-widget-icon-list { flex: 0 0 100%; margin-inline-end: 0; }
	.ekz-trustbar .ekz-facet__wpgb--radenie { flex: 1 1 0; min-width: 0; }
}

/* The sort bar is a card on both surfaces — the wrapper only exists since MAR-1567. */
.ekz-sortbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--ekz-gap); flex-wrap: wrap;
	margin-bottom: var(--ekz-space-24);
}
.ekz-sortbar .woocommerce-result-count,
.ekz-sortbar .woocommerce-ordering { margin: 0; float: none; }

/*
 * Panels that were sunken-on-white invert instead of changing — on a sunken page
 * they would be invisible. The order summary and the account panels are the two
 * the design system calls out; the rest are the same pattern elsewhere in the
 * checkout, so they move together or the page looks half-finished.
 */
body.ekz-shop .ekz-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.ekz-shop .ekz-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
body.ekz-shop .ekz-checkout.ekz-checkout form.woocommerce-form-login,
body.ekz-shop .ekz-checkout.ekz-checkout form.checkout_coupon,
body.ekz-shop .ekz-account .woocommerce-info,
body.ekz-shop .ekz-account .woocommerce-message,
body.ekz-shop ul.woocommerce-order-overview {
	background: var(--ekz-surface-raised);
}

/*
 * Unselected delivery and payment rows go the other way — from white to ink-50 —
 * so they still read as choices inside a white card. The selected row keeps the
 * green tint, which is now the only strong surface in the panel.
 */
body.ekz-shop .ekz-checkout #order_review ul#shipping_method li,
body.ekz-shop .ekz-checkout ul.wc_payment_methods li.wc_payment_method,
body.ekz-shop .ekz-cart .cart_totals ul#shipping_method li {
	background: var(--ekz-surface-sunken);
}
body.ekz-shop .ekz-checkout #order_review ul#shipping_method li:has(input:checked),
body.ekz-shop .ekz-checkout ul.wc_payment_methods li.wc_payment_method:has(input:checked),
body.ekz-shop .ekz-cart .cart_totals ul#shipping_method li:has(input:checked) {
	background: var(--ekz-surface-accent);
}

/*
 * The page-title band is continuous with the page in the shop: the page is already
 * sunken, so a sunken band would be an invisible rectangle with a stray hairline
 * under it. Breadcrumb and H1 sit straight on the page surface.
 */
body.ekz-shop .e-con.ekz-pagehead { background: transparent; border-bottom: 0; }

/* ============ 36 · Contrast — four measured failures (MAR-1567) =========== */
/*
 * 1 · Footer address read #39434A on #0B0E10 = 1.91:1 on all nine templates.
 *
 * Not an Elementor override: section 26 already sets the on-inverse colour for
 * the footer icon list, but the generic icon-list rule further down the file ties
 * on specificity (0,3,1) and wins on source order. Same specificity, later file
 * position — the quiet way a design system loses to itself. Scoping the generic
 * rule to :not(.ekz-on-dark *) would be fragile; restating the dark-surface rule
 * here, after both, is the rule that cannot be undercut by a later addition.
 */
body .ekz-footer .elementor-widget-icon-list .elementor-icon-list-item > a,
body .ekz-footer .elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text,
body .ekz-on-dark .elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text,
body .ekz-header--dark .elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text {
	color: var(--ekz-text-on-inverse-muted);
}
/* Except the Eshop panel, which is a light surface under the dark bar: the dealer
   seal there read pale grey on #F4F6F5 (MAR-2166). */
body .ekz-header--dark .ekz-mega__panel .elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text {
	color: var(--ekz-text-muted);
}

/*
 * 2 · Cart count badge: white on #D9534F = 3.96:1, and that red is not in the
 * system at all. It comes from Elementor Pro's own widget CSS, whose selector
 * carries an attribute and beats ours, so this sets the variable that CSS reads
 * instead of fighting it on specificity.
 */
body .ekz-header .elementor-widget-woocommerce-menu-cart {
	--items-indicator-background-color: var(--ekz-action-primary);
	--items-indicator-text-color: var(--ekz-white);
}

/*
 * 3 · Form submit button: white on #16A855 = 3.10:1. green-500 is the system's
 * value for small text ON DARK, never a fill under white text on a light page —
 * that is green-800. The Elementor form widget writes the kit accent into
 * [type="submit"], which outranks our .elementor-button rule.
 */
body .elementor-widget-form .elementor-button[type="submit"] {
	background-color: var(--ekz-action-primary);
}
body .elementor-widget-form .elementor-button[type="submit"]:hover {
	background-color: var(--ekz-action-primary-hover);
}

/* 4 · Breadcrumb links: WooCommerce's own #767676 = 4.18:1 on the sunken band. */
body.woocommerce .woocommerce-breadcrumb,
body.woocommerce .woocommerce-breadcrumb a {
	color: var(--ekz-text-muted);
}
body.woocommerce .woocommerce-breadcrumb a:hover { color: var(--ekz-text-accent); }

/* ============ 37 · Scale — measured deviations (MAR-1567) ================= */
/* Ours: the pagination cell. The price block is fixed at source in section 16. */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span { padding-block: 8px; }
/* Woo's login/register rows carry a 3px bottom margin of their own. */
body.woocommerce-account p.form-row,
body.woocommerce-account p.woocommerce-form-row { margin-bottom: var(--ekz-space-8); }

/* WooCommerce ships these as `1em`, which lands on 11.96 / 15 / 17px here. */
body.woocommerce .woocommerce-result-count,
body.woocommerce .widget_price_filter .price_slider { margin-bottom: var(--ekz-space-16); }
/* The breadcrumb gets none: it sits in a container that already spaces its
   children, so its own margin added a second, unrelated 16px under it and the
   page header read as two gaps instead of one (MAR-1623). */
body.woocommerce .woocommerce-breadcrumb { margin-bottom: 0; }

/*
 * Elementor's icon list indents its text by 5px from its widget stylesheet, so the
 * override names the same chain of elements to outrank it.
 * The space between items has no rule here: it is the widget's own Space Between
 * field (lib.php icon_list(), 12; the top bar 24 inline). The `padding-bottom: 4px`
 * that stood here lost to that field on every list with two items or more, and on
 * an inline list it would have applied and lifted one item above the other (MAR-1634).
 */
body .elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-text {
	padding-inline-start: 4px;
}

/* MAR-1634 — paragraph spacing has one owner inside a text and one after it.
 * Between paragraphs: Theme Style › Typography › Paragraph Spacing (24), emitted
 * as `.elementor-kit-12 p` with no :last-child exception — so the last paragraph's
 * margin used to stack on the space after every text widget (breadcrumb → H1 48,
 * card bottoms 48, service description → link 36 at gap 12; 122 widgets).
 * After the text: the container's Gap / Padding field, nothing else. Elementor
 * 4.2.4 has no field that spares the last paragraph (upstream discussion #25431),
 * hence this one structural rule. It replaces `body p { margin-bottom: 16px }`,
 * which never applied: the kit rule outranks it on every page. The product's
 * short description is the same kind of text (a WooCommerce widget) and had the
 * same 48 under it.
 * Only the text's own last block: a direct child of the widget (Elementor's
 * optimized markup has no .elementor-widget-container) or of Woo's description
 * div. A descendant selector also took the last paragraph of a nested <div> or
 * <blockquote> in the middle of a text (review MAR-1634-css-2026-09-25). The
 * padded sample form on the withdrawal page is such a box and keeps its own
 * padding as the only space inside its bottom edge. */
body .elementor-widget-text-editor > :is(p, ul, ol):last-child,
body .elementor-widget-woocommerce-product-short-description .woocommerce-product-details__short-description > :is(p, ul, ol):last-child,
body .ekz-sample-form > :last-child { margin-block-end: 0; }

/* ============ 38 · Hit targets — 44px minimum (MAR-1567) ================= */
/*
 * Measured at 390px, where every one of these is a thumb target: size chips were
 * 37px tall, the gallery zoom 36, the cart toggle 42 and the fallback variation
 * select 26.
 */
body .ekz-chip { min-height: 44px; }
body .woocommerce div.product .woocommerce-product-gallery__trigger { width: 44px; height: 44px; }
body .ekz-header .elementor-menu-cart__toggle .elementor-button { min-width: 44px; min-height: 44px; }
body .ekz-varpick select,
body .woocommerce div.product form.cart .variations select { min-height: 44px; }

/* ============ 39 · Catalogue filters as a drawer under 1024px ============= */
/*
 * Measured at 390px: the facet column was 2 284px tall and pushed the first
 * product to 2 692px — nearly three screens of filters before a single product.
 * The drawer is the pattern the header already uses at the same breakpoint.
 *
 * The button and backdrop are injected by ekz-filters.js; if the script does not
 * run, the column simply stays in the flow and nothing is hidden.
 */
/*
 * Both controls belong to the drawer, so both are off above the breakpoint. The
 * close button was caught by the audit as a stray 16px button sitting in the facet
 * column at 1440px — it only has styling inside the media query, so without this
 * it rendered as a bare default button.
 */
.ekz-filters-toggle,
.ekz-filters-close,
.ekz-filters-backdrop { display: none; }
/* 1024 included, like every other tablet rule here: the catalogue is one column
   there, and while the drawer ended at 1023 the whole panel stood above the
   products — the first one 1 318px down at 1024 against 518 at 1023 (MAR-1727). */
@media (max-width: 1024px) {
	.ekz-filters-close, .ekz-filters-backdrop { display: block; }
	/* `body button.`: Theme Style's `.elementor-kit-12 button` (0,1,1) paints every
	   <button> as the primary one. It had turned this one green — white on green,
	   the green count badge lost in it — and of the lines below only the border,
	   the shadow and the min-height applied (MAR-1634, 2026-09-27). */
	body button.ekz-filters-toggle {
		display: inline-flex; align-items: center; gap: var(--ekz-gap-tight);
		min-height: 44px; padding: var(--ekz-space-10) var(--ekz-space-16);
		/* A flex item of the catalogue's top row, beside the sort select; no margin,
		   the row's gap is the space. */
		flex: 0 0 auto;
		background: var(--ekz-surface-raised); color: var(--ekz-text-strong);
		/* The sort select's chrome — the card's 2px border, radius 12 and shadow —
		   so the two tools in one row read as a pair; hover turns the border green
		   like theirs (MAR-1634, 2026-09-27; it was the 6-radius control button). */
		border: 2px solid var(--ekz-border-subtle); border-radius: var(--ekz-radius-card);
		box-shadow: var(--ekz-shadow-1); transition: var(--ekz-transition-card);
		font: var(--ekz-weight-semibold) var(--ekz-size-body-sm)/1 var(--ekz-font-core);
		cursor: pointer;
	}
	/* The kit's hover/focus fill (#0A6430) as well. */
	body button.ekz-filters-toggle:is(:hover, :focus, :active) { background: var(--ekz-surface-raised); color: var(--ekz-text-strong); }
	body button.ekz-filters-toggle:hover { border-color: var(--ekz-accent); }
	.ekz-filters-toggle__count {
		min-width: 20px; padding: 0 4px; border-radius: var(--ekz-radius-pill);
		background: var(--ekz-action-primary); color: var(--ekz-white);
		font-size: var(--ekz-size-caption); line-height: 20px; text-align: center;
	}

	/* js-enhanced only: without the script the column keeps its place in the flow. */
	body.ekz-filters-ready .e-con-full.ekz-facets {
		position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 1001;
		width: min(86vw, 360px); max-width: none; margin: 0;
		overflow-y: auto; overscroll-behavior: contain;
		border-radius: 0; box-shadow: var(--ekz-shadow-3, 0 12px 32px rgba(20,24,27,.18));
		transform: translateX(-100%); transition: transform .2s ease;
		visibility: hidden;
	}
	body.ekz-filters-open .e-con-full.ekz-facets { transform: none; visibility: visible; }
	/* The backdrop and the close button are <button>s as well, so the same
	   `body button.` applies: the kit had made the backdrop its opaque hover green
	   (#0A6430 — the pointer rests on it once it covers the page) and the × a
	   62×44 primary button (MAR-1727). */
	body button.ekz-filters-backdrop {
		position: fixed; inset: 0; z-index: 1000; border: 0; border-radius: 0; padding: 0;
		background: rgba(11, 14, 16, .48); opacity: 0; pointer-events: none;
		transition: opacity .2s ease;
	}
	body button.ekz-filters-backdrop:is(:hover, :focus, :active) { background: rgba(11, 14, 16, .48); }
	body.ekz-filters-open button.ekz-filters-backdrop { opacity: 1; pointer-events: auto; }
	body.ekz-filters-open { overflow: hidden; }
	/* The header's icon buttons (RULES §3a): 44×44, the 2px control border,
	   radius 6, an 18px icon; hover changes the fill only. */
	/* flex: none — the open panel is a one-screen column that overflows, and a
	   flex item shrinks to its content when it can: this one had gone to 44×22,
	   the height of its icon (measured).
	   Only the fill is animated. Hello's reset gives every button `transition:
	   all .3s`, which animated the visibility it inherits from the panel as well:
	   the × stayed hidden for the first ~250ms after opening, so ekz-filters.js
	   could not move focus to it and a keyboard user was left on "Filtre" behind
	   the backdrop (measured, MAR-1727). */
	body button.ekz-filters-close {
		position: sticky; top: 0; z-index: 1; align-self: flex-end; flex: none;
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; padding: 0; margin: 0 0 var(--ekz-space-8);
		background: var(--ekz-surface-raised); color: var(--ekz-text-strong);
		border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-button);
		transition: background-color var(--ekz-duration-fast) var(--ekz-ease-standard);
		cursor: pointer;
	}
	body button.ekz-filters-close:is(:hover, :focus, :active) { background: var(--ekz-surface-raised); color: var(--ekz-text-strong); }
	body button.ekz-filters-close:hover { background: var(--ekz-surface-sunken); }
	.ekz-filters-close svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	body.ekz-filters-ready .e-con-full.ekz-facets,
	body button.ekz-filters-backdrop { transition: none; }
}

/* ============ 40 · Focus indicator (MAR-1232) ============================= */
/*
 * Measured with a real Tab walk on the live site: a keyboard user got the browser's
 * default black ring on links — invisible on every dark band and in the footer — and
 * NOTHING AT ALL on the search field, the sort select, the size chips, the quantity
 * field, the quantity buttons and the catalogue colour swatches.
 *
 * Root cause is specificity, not a missing rule. The system defines the ring with the
 * weakest selector there is, a bare `:focus-visible` (0,1,0), so every framework rule
 * that mentions focus outranks it; and the places that replace the outline with a
 * box-shadow are in turn overridden by Elementor's own `0 0 0 0 transparent` reset.
 *
 * Restated here, last in the file, as longhands. Longhands rather than the `outline`
 * shorthand on purpose: a shorthand carrying a var() serialises as an empty string in
 * the CSSOM, which is what made the cascade so hard to inspect in the first place.
 */
/*
 * `!important` is deliberate here and only here.
 *
 * The first attempt at this fix used ordinary high-specificity selectors and still
 * left eleven checkout fields, the quantity field, the search box and the price
 * slider handles with no indicator at all: Elementor writes per-element CSS whose
 * selectors are regenerated whenever anyone edits a widget, so any specificity that
 * wins today can lose after the client moves a field in the editor. A focus ring is
 * the one thing on the page that must not depend on winning that race — without it
 * a keyboard user simply cannot tell where they are.
 */
/* Except notices. WooCommerce focuses a notice from script (tabindex -1) so a screen
 * reader announces it, and on a freshly loaded page Chrome counts that as
 * :focus-visible — so this !important drew a 2px green frame around every "added to
 * cart" message, beating the "no ring on a notice" rule in section 16 (MAR-1634
 * P00). A notice is not a control; nobody navigates to it. */
body :focus-visible:not(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	outline-style: solid !important;
	outline-width: 2px !important;
	outline-color: var(--ekz-action-primary) !important;
	outline-offset: 2px !important;
}

/*
 * On dark surfaces green-800 is only 3.34:1. green-500 is the system's value for dark
 * backgrounds and gives 6.26:1 on ink-900, which is what the footer and the dark hero
 * bands need — that is where the default black ring was disappearing completely.
 */
body .ekz-on-dark :focus-visible,
body .ekz-on-dark-deep :focus-visible,
body .ekz-photo-band :focus-visible,
body .ekz-header--dark :focus-visible,
body .ekz-footer :focus-visible {
	outline-color: var(--ekz-accent-text-dark) !important;
}

/*
 * The price slider handles are the one control whose background cannot be predicted:
 * a handle can sit over the green range bar, over the pale track or half over each,
 * and it moves while the visitor drags it. A single-colour ring fails somewhere —
 * measured 2.44:1 in green and 1.37:1 in ink-900.
 *
 * So the indicator carries both tones: a white ring against the handle, and a dark
 * halo outside it. Whichever side the background is on, one of the two bands holds
 * the 3:1 boundary that WCAG 1.4.11 asks for.
 */
body .price_slider_wrapper .ui-slider-handle:focus-visible {
	outline-color: var(--ekz-white) !important;
	outline-offset: 0 !important;
	box-shadow: 0 0 0 4px var(--ekz-ink-900) !important;
}

/*
 * Inputs keep their tinted border and shadow as the resting "this is where you are"
 * cue. They simply no longer rely on it alone — `outline: none` in the forms layer
 * is what left the search field and the checkout fields with nothing at all once
 * Elementor had flattened the replacement shadow to `0 0 0 0 transparent`.
 */

/* ============ Choice controls: one shape (MAR-1635 Q07) =================== */
/*
 * Radio and checkbox share one control: 18px, a 2px control border #D7DDDA (2px
 * like the filter boxes since Maroš asked for Grandesport's heavier border,
 * MAR-1634 2026-09-27 — one shape everywhere, §3a), the 6px
 * nested radius, green when chosen. Maroš chose one shape over the round-radio
 * convention ("Nie, zjednotiť"); the chosen radio keeps a square dot and the
 * checkbox a tick, so a group of radios still reads as "pick one".
 *
 * Scoped to our own surfaces on purpose — a bare input[type] rule would also
 * restyle the cookie banner's switches and the admin bar. Size, position and
 * focus rings stay with the per-component rules above; this sets the look only.
 */
body .ekz-checkout.ekz-checkout input[type="radio"],
body .ekz-checkout.ekz-checkout input[type="checkbox"],
body .ekz-cart.ekz-cart input[type="radio"],
body .ekz-cart.ekz-cart input[type="checkbox"],
body .ekz-account input[type="radio"],
body .ekz-account input[type="checkbox"],
body .ekz-form input[type="radio"],
body .ekz-form input[type="checkbox"] {
	-webkit-appearance: none; appearance: none;
	box-sizing: border-box; width: 18px; height: 18px; flex: 0 0 auto;
	display: inline-grid; place-content: center;
	background: var(--ekz-white) center / 12px 12px no-repeat;
	border: 2px solid var(--ekz-border-default); border-radius: var(--ekz-radius-sm);
	cursor: pointer; transition: var(--ekz-transition-color);
}
/* Theme Style's form-field padding (12) is meant for text fields, but Elementor
   writes it as `.elementor-kit-12 input:not([type="button"]):not([type="submit"])`
   (0,3,1), which takes checkboxes and radios too: the 18px border-box above grew
   to 26×26 on every page (MAR-1634). This selector is (0,3,2). */
body :is(.ekz-checkout.ekz-checkout, .ekz-cart.ekz-cart, .ekz-account, .ekz-form) input:is([type="radio"], [type="checkbox"]) { padding: 0; }
body .ekz-checkout.ekz-checkout input[type="radio"]:hover,
body .ekz-checkout.ekz-checkout input[type="checkbox"]:hover,
body .ekz-cart.ekz-cart input[type="radio"]:hover,
body .ekz-cart.ekz-cart input[type="checkbox"]:hover,
body .ekz-account input[type="radio"]:hover,
body .ekz-account input[type="checkbox"]:hover,
body .ekz-form input[type="radio"]:hover,
body .ekz-form input[type="checkbox"]:hover { border-color: var(--ekz-accent); }
body .ekz-checkout.ekz-checkout input[type="radio"]:checked,
body .ekz-checkout.ekz-checkout input[type="checkbox"]:checked,
body .ekz-cart.ekz-cart input[type="radio"]:checked,
body .ekz-cart.ekz-cart input[type="checkbox"]:checked,
body .ekz-account input[type="radio"]:checked,
body .ekz-account input[type="checkbox"]:checked,
body .ekz-form input[type="radio"]:checked,
body .ekz-form input[type="checkbox"]:checked {
	background-color: var(--ekz-action-primary); border-color: var(--ekz-action-primary);
}
body .ekz-checkout.ekz-checkout input[type="checkbox"]:checked,
body .ekz-cart.ekz-cart input[type="checkbox"]:checked,
body .ekz-account input[type="checkbox"]:checked,
body .ekz-form input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body .ekz-checkout.ekz-checkout input[type="radio"]:checked::before,
body .ekz-cart.ekz-cart input[type="radio"]:checked::before,
body .ekz-account input[type="radio"]:checked::before,
body .ekz-form input[type="radio"]:checked::before {
	content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--ekz-white);
}