/*
 * Superkomputery: layout and components. Every colour, size and space comes from theme.json presets
 * (--wp--preset--*) or custom values (--wp--custom--*); change them there, not here.
 */
:root {
	--sk-gutter: var(--wp--preset--spacing--gutter);
	--sk-line: 1px solid var(--wp--preset--color--line);
	--sk-photo-bg: #fff; /* the white of the makers' product photos, behind every picture box */
	color-scheme: dark;
}
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }
:where(a) { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 3px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The main area fills the window so the footer sits at the bottom of short pages. */
.wp-site-blocks { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.wp-site-blocks > .sk-main { flex: 1 0 auto; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.sk-main { padding-block: var(--wp--preset--spacing--l) var(--wp--preset--spacing--xl); }
.sk-main--home { padding-block: 0; display: flex; flex-direction: column; }
/* On a screen taller than the hero, the hero takes the spare height (its content centred), so the trust strip meets the footer instead of leaving an empty band above it. */
.sk-main--home > .sk-hero { flex: 1 0 auto; width: 100%; box-sizing: border-box; }
.sk-page-title { font-size: var(--wp--preset--font-size--xxl); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 var(--wp--preset--spacing--m); text-wrap: balance; overflow-wrap: anywhere; }

/* Shared pieces */
.sk-eyebrow { margin: 0; font-size: var(--wp--preset--font-size--xs); letter-spacing: var(--wp--custom--letter-spacing--eyebrow); text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--gold); }
.sk-link { color: var(--wp--preset--color--gold); font-weight: 600; font-size: var(--wp--preset--font-size--sm); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 35%, transparent); padding-bottom: 1px; }
.sk-link:hover { color: var(--wp--preset--color--text); border-bottom-color: currentColor; }
.sk-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; font-family: inherit; }
.sk-btn--ghost { background: transparent; color: var(--wp--preset--color--text); box-shadow: inset 0 0 0 1px var(--wp--preset--color--line); font-weight: 600; }
.sk-btn--ghost:hover { background: var(--wp--preset--color--raise); color: var(--wp--preset--color--text); }

/* Header */
.sk-header { border-bottom: var(--sk-line); }
.sk-top { box-sizing: content-box; max-width: var(--wp--style--global--wide-size); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--wp--preset--spacing--s); padding: 14px var(--sk-gutter); position: relative; }
.sk-logo { display: inline-flex; align-items: center; gap: 11px; color: var(--wp--preset--color--text); text-decoration: none; line-height: 1; white-space: nowrap; }
.sk-logo:hover { color: var(--wp--preset--color--text); }
.sk-logo__mark { width: 22px; height: 22px; flex: 0 0 auto; fill: var(--wp--preset--color--text); }
.sk-logo__mark .sk-logo__lit { fill: var(--wp--preset--color--gold); }
.sk-logo__word { font-family: var(--wp--preset--font-family--mono); font-weight: 600; font-size: var(--wp--preset--font-size--sm); letter-spacing: var(--wp--custom--letter-spacing--wordmark); }
.sk-nav { display: flex; align-items: center; gap: var(--wp--preset--spacing--m); }
.sk-nav ul { list-style: none; margin: 0; padding: 0; }
.sk-nav__list { display: flex; gap: 22px; }
.sk-nav a { color: var(--wp--preset--color--dim); text-decoration: none; font-size: var(--wp--preset--font-size--sm); }
.sk-nav a:hover, .sk-nav a[aria-current="page"] { color: var(--wp--preset--color--text); }
.sk-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); text-underline-offset: 0.5em; }
.sk-nav .sk-nav__cart { display: inline-flex; align-items: center; gap: 6px; color: var(--wp--preset--color--text); }
/* On the cart page only the word is underlined: an underline on the link would run through the count pill too. */
.sk-nav .sk-nav__cart[aria-current="page"] { text-decoration: none; }
.sk-nav .sk-nav__cart[aria-current="page"] > span:not(.sk-nav__count) { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); text-underline-offset: 0.5em; }
.sk-nav__count { min-width: 20px; height: 20px; padding-inline: 5px; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--gold); color: var(--wp--preset--color--on-gold); font-size: var(--wp--preset--font-size--xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sk-nav .sk-lang { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: 0.08em; color: var(--wp--preset--color--text); border: var(--sk-line); border-radius: var(--wp--custom--radius--field); padding: 5px 8px; line-height: 1; }
.sk-nav .sk-lang:hover { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); }
.sk-menu { display: none; }
.sk-menu__toggle { list-style: none; width: 40px; height: 40px; border: var(--sk-line); border-radius: var(--wp--custom--radius--field); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--wp--preset--color--text); }
.sk-menu__toggle::-webkit-details-marker { display: none; }
.sk-menu[open] .sk-menu__toggle { background: var(--wp--preset--color--raise); }
.sk-menu__list { position: absolute; inset-inline: 0; top: 100%; z-index: 20; background: var(--wp--preset--color--deep); border-block: var(--sk-line); padding: 6px var(--sk-gutter) 12px !important; }
.sk-menu__list a { display: block; padding: 12px 0; font-size: var(--wp--preset--font-size--base); color: var(--wp--preset--color--text); border-bottom: var(--sk-line); }
.sk-menu__list li:last-child a { border-bottom: 0; }

/* Footer */
.sk-footer { background: var(--wp--preset--color--deep); border-top: var(--sk-line); color: var(--wp--preset--color--dim); font-size: var(--wp--preset--font-size--xs); }
.sk-foot { box-sizing: content-box; max-width: var(--wp--style--global--wide-size); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 18px var(--sk-gutter); }
.sk-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sk-foot a { color: var(--wp--preset--color--dim); text-decoration: none; }
.sk-foot a:hover { color: var(--wp--preset--color--text); }
.sk-foot__copy { margin: 0; }

/* Home hero */
.sk-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--wp--preset--spacing--l); align-items: center; padding-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l); }
.sk-hero__title { font-size: var(--wp--preset--font-size--display); line-height: var(--wp--custom--line-height--tight); font-weight: 800; letter-spacing: var(--wp--custom--letter-spacing--display); margin: 12px 0 18px; text-wrap: balance; }
.sk-hero__title em { font-style: normal; color: var(--wp--preset--color--gold); }
.sk-hero__lede { color: var(--wp--preset--color--dim); max-width: 62ch; text-wrap: pretty; margin: 0 0 var(--wp--preset--spacing--m); font-size: var(--wp--preset--font-size--md); }
/* Each sentence of the lede on its own line beside the image; one that is still too long wraps evenly. */
@media (min-width: 600px) { .sk-hero__lede span { display: block; text-wrap: balance; } }
.sk-buy__form { margin: 0; }
.sk-price { margin: 0; font-size: var(--wp--preset--font-size--xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.sk-price small { display: block; font-size: var(--wp--preset--font-size--xs); font-weight: 400; color: var(--wp--preset--color--dim); letter-spacing: 0; margin-top: 6px; }
.sk-stock { margin: 0; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--dim); display: inline-flex; align-items: center; gap: 7px; }
.sk-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--stock); }
.sk-stock--out::before { background: var(--wp--preset--color--dim); }
.sk-hero__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--s); min-width: 0; }
.sk-hero__pic { position: relative; width: 100%; max-width: 410px; }
.sk-hero__pic img { display: block; width: 100%; height: auto; }
.sk-hotspot { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--on-gold); font-size: var(--wp--preset--font-size--xs); font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--wp--custom--glow); }
.sk-legend { list-style: none; counter-reset: sk-legend; margin: 0; padding: 0; width: 100%; max-width: 540px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.sk-legend li { counter-increment: sk-legend; position: relative; padding-left: 32px; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--dim); line-height: 1.4; }
.sk-legend li::before { content: counter(sk-legend); position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; border: 1px solid var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sk-legend strong { display: block; color: var(--wp--preset--color--text); font-weight: 600; }

/* Trust strip: the four promises, a full-width band whose columns line up with the page content */
.sk-trust { border-block: var(--sk-line); padding-inline: var(--sk-gutter); overflow-x: clip; }
.sk-trust__list { list-style: none; margin: 0 auto; padding: 0; max-width: var(--wp--style--global--wide-size); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sk-trust__list li { padding: 18px 20px; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--dim); line-height: 1.4; }
.sk-trust__list li:first-child { padding-left: 0; }
.sk-trust__list li + li { border-left: var(--sk-line); }
.sk-trust strong { display: block; color: var(--wp--preset--color--text); font-weight: 600; margin-bottom: 3px; }
.sk-main--product .sk-trust { margin-block: var(--wp--preset--spacing--l); }

/* Kontakt */
.sk-kontakt { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--m); }
.sk-kontakt__head .sk-page-title { margin: 8px 0 0; }
.sk-kontakt__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--wp--preset--spacing--l); align-items: start; }
.sk-kontakt__info { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--m); min-width: 0; }
.sk-reach { margin: 0; display: grid; gap: 1px; background: var(--wp--preset--color--line); border: var(--sk-line); border-radius: var(--wp--custom--radius--card); overflow: hidden; }
.sk-reach > div { background: var(--wp--preset--color--raise); padding: 14px 16px; }
.sk-reach dt { font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--dim); margin-bottom: 3px; }
.sk-reach dd { margin: 0; font-size: var(--wp--preset--font-size--lg); font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sk-reach dd.sk-reach__mail { font-size: var(--wp--preset--font-size--md); font-weight: 600; }
.sk-reach a { color: var(--wp--preset--color--text); text-decoration: none; }
.sk-reach a:hover { color: var(--wp--preset--color--gold); }
.sk-company { display: flex; flex-direction: column; gap: 12px; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--dim); }
.sk-company p { margin: 0; }
.sk-company__own { color: var(--wp--preset--color--text); font-size: var(--wp--preset--font-size--base); font-weight: 600; line-height: 1.35; }
.sk-company__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; }
.sk-company__list dd { margin: 0; color: var(--wp--preset--color--text); }
.sk-map { margin: 0; border-radius: var(--wp--custom--radius--card); overflow: hidden; border: var(--sk-line); background: var(--wp--preset--color--deep); }
.sk-map img { display: block; width: 100%; height: auto; aspect-ratio: 15 / 8; object-fit: cover; }
.sk-map figcaption { background: var(--wp--preset--color--raise); padding: 10px 14px 12px; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--dim); display: flex; flex-direction: column; gap: 6px; }
.sk-map__bar { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.sk-map small { font-size: 11px; }

/* Ordinary pages (terms, delivery) */
.sk-main--page .wp-block-post-content { color: var(--wp--preset--color--text); }
.sk-main--page .wp-block-post-content :where(p, li) { color: color-mix(in srgb, var(--wp--preset--color--text) 88%, var(--wp--preset--color--ground)); }
.sk-main--page .wp-block-post-content :where(h2) { font-size: var(--wp--preset--font-size--lg); margin-block-start: var(--wp--preset--spacing--l); }
.sk-main--page .wp-block-post-content :where(h3) { font-size: var(--wp--preset--font-size--md); margin-block-start: var(--wp--preset--spacing--m); }
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; font-size: var(--wp--preset--font-size--sm); }
.wp-block-table :where(th, td) { border: var(--sk-line); padding: 9px 12px; text-align: left; vertical-align: top; }
.wp-block-table th { color: var(--wp--preset--color--dim); font-weight: 600; }
:where(input, select, textarea) { font: inherit; }

/* Tablet and phone */
@media (max-width: 1000px) {
	.sk-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sk-trust__list li { padding: 15px 0 15px 16px; }
	.sk-trust__list li:nth-child(odd) { padding-left: 0; border-left: 0; }
	/* The line between the two rows runs the strip's full width, like its top and bottom border. */
	.sk-trust__list li:nth-child(3) { position: relative; }
	.sk-trust__list li:nth-child(3)::before { content: ""; position: absolute; top: 0; left: -100vw; width: 300vw; border-top: var(--sk-line); }
}
@media (max-width: 760px) {
	.sk-top { padding-block: 10px; }
	.sk-logo__word { font-size: var(--wp--preset--font-size--xs); }
	.sk-nav { gap: 10px; }
	.sk-nav__list { display: none; }
	.sk-menu { display: block; }
	.sk-nav .sk-nav__cart { min-height: 40px; }
	.sk-hero { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--m); padding-block: var(--wp--preset--spacing--m) var(--wp--preset--spacing--l); }
	.sk-hero__figure { padding-top: var(--wp--preset--spacing--s); }
	.sk-hero__pic { max-width: 280px; }
	.sk-legend { grid-template-columns: minmax(0, 1fr); }
	.sk-kontakt__grid { grid-template-columns: minmax(0, 1fr); }
}
/* The narrowest phones (320 to 374 px): the cart shows its icon and count without the word, which stays for screen
   readers, and the header's gaps and the wordmark's spacing tighten, so the header fits without the page sliding sideways. */
@media (max-width: 374px) {
	.sk-top, .sk-nav { gap: 6px; }
	.sk-logo { gap: 8px; }
	.sk-logo__word { letter-spacing: 0.06em; }
	.sk-nav .sk-lang { padding-inline: 6px; }
	.sk-nav__cart svg { flex: none; }
	.sk-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; }
}

/* Content pieces used by content/ (policy pages, product description) */
.sk-draft { border: 1px dashed var(--wp--preset--color--gold); border-radius: var(--wp--custom--radius--field); padding: 10px 14px !important; color: var(--wp--preset--color--gold); font-size: var(--wp--preset--font-size--sm); }
.sk-draft p { margin: 0; color: inherit !important; }
.sk-lead { font-size: var(--wp--preset--font-size--md); color: var(--wp--preset--color--text) !important; }
.sk-note { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--dim) !important; }
.sk-form-sample { background: var(--wp--preset--color--raise); border: var(--sk-line); border-radius: var(--wp--custom--radius--card); padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m) !important; }
.sk-form-sample p { margin-block: 0 10px; }
.sk-spec table { border: 0; }
.sk-spec :is(th, td) { border: 0 !important; border-bottom: var(--sk-line) !important; padding: 9px 12px 9px 0 !important; }
.sk-spec th { width: 34%; font-weight: 400 !important; }
.wp-block-details { border-bottom: var(--sk-line); padding-block: 12px; margin-block: 0 !important; }
.wp-block-details summary { cursor: pointer; font-weight: 600; color: var(--wp--preset--color--text); }
.wp-block-details summary::marker { color: var(--wp--preset--color--gold); }
.wp-block-details > p { margin: 10px 0 0; color: var(--wp--preset--color--dim); }
.sk-product__details .woocommerce-Tabs-panel :where(h2) { font-size: var(--wp--preset--font-size--lg); margin-block: var(--wp--preset--spacing--l) var(--wp--preset--spacing--xs); }
.sk-product__details .woocommerce-Tabs-panel :where(p, li) { color: color-mix(in srgb, var(--wp--preset--color--text) 88%, var(--wp--preset--color--ground)); }