/*
 * Design tokens (custom properties only, no selectors besides :root).
 * Values are copied 1:1 from the Automatic.css configuration the Oxygen build used.
 * Breakpoints (literal values, mobile-first): min-width 480, 768, 992, 1024, 1341 - the complements of ACSS's
 * max-width 479/767/991/1023/1340. Odd values (481, 769, 993, 1025, ...) come from ported snippets and are kept 1:1.
 */

:root {
	/* ---- Colour: primary ---- */
	--primary: #623385;
	--primary-hover: #6f3a98;
	--primary-ultra-light: #f3edf8;
	--primary-light: #dbc8ea;
	--primary-semi-light: #ab7ece;
	--primary-medium: #8746b9;
	--primary-semi-dark: #5f3181;
	--primary-dark: #44235c;
	--primary-ultra-dark: #1b0e25;
	--primary-trans-10: rgba(98, 51, 133, 0.1);
	--primary-trans-20: rgba(98, 51, 133, 0.2);
	--primary-trans-80: rgba(98, 51, 133, 0.8);
	--primary-ultra-dark-trans-10: rgba(27, 14, 37, 0.1);
	--primary-ultra-dark-trans-20: rgba(27, 14, 37, 0.2);
	--primary-ultra-dark-trans-80: rgba(27, 14, 37, 0.8);

	/* ---- Colour: secondary ---- */
	--secondary: #efebf3;
	--secondary-hover: #ffffff;
	--secondary-ultra-light: #f2eff5;
	--secondary-light: #d9cfe2;
	--secondary-semi-light: #a68fbc;
	--secondary-medium: #7f609f;
	--secondary-semi-dark: #594370;
	--secondary-dark: #403050;
	--secondary-ultra-dark: #191320;

	/* ---- Colour: accent ---- */
	--accent: #a0c801;
	--accent-hover: #b7e401;
	--accent-ultra-light: #faffe6;
	--accent-light: #efffb3;
	--accent-semi-light: #dbfe4d;
	--accent-medium: #cbfe01;
	--accent-semi-dark: #8eb201;
	--accent-dark: #667f01;
	--accent-ultra-dark: #293300;

	/* ---- Colour: base (text) ---- */
	--base: #444444;
	--base-hover: #4f4f4f;
	--base-ultra-light: #f2f2f2;
	--base-light: #d9d9d9;
	--base-semi-light: #a6a6a6;
	--base-medium: #808080;
	--base-semi-dark: #595959;
	--base-dark: #404040;
	--base-ultra-dark: #1a1a1a;
	--base-trans-20: rgba(68, 68, 68, 0.2);

	/* ---- Colour: shade (neutrals) ---- */
	--shade: #313131;
	--shade-hover: #383838;
	--shade-white: #ffffff;
	--shade-black: #000000;
	--shade-ultra-light: #fafafa;
	--shade-light: #f0f0f0;
	--shade-semi-light: #a6a6a6;
	--shade-medium: #808080;
	--shade-semi-dark: #595959;
	--shade-dark: #404040;
	--shade-ultra-dark: #1a1a1a;
	--shade-ultra-dark-trans-10: rgba(26, 26, 26, 0.1);
	--shade-ultra-dark-trans-20: rgba(26, 26, 26, 0.2);

	--white: #ffffff;
	--black: #000000;

	/* ---- Colour: one-off values used by the Oxygen design ---- */
	--color-required: #a92f2f;
	--color-user-btn-bg: #f2f2f2;
	--color-user-btn-text: #8c8c8c;
	--color-toggle-icon: #b5b4b4;
	--color-backdrop: rgba(0, 0, 0, 0.5);
	--shadow-topbar: 0 5px 30px rgba(0, 0, 0, 0.06);
	--shadow-sticky-header: 0 15px 50px var(--primary-trans-20);
	--shadow-megamenu-panel: rgba(0, 0, 0, 0.1) 0 0 1em;
	--shadow-megamenu-overlay: rgba(0, 0, 0, 0.376) 0 550px 300px 300px;
	--shadow-card-hover: 0 30px 70px rgb(0 0 0 / 5%); /* snippet 5419: category cards, banners */
	--shadow-soft: 0 0 50px rgba(0, 0, 0, 0.05); /* cart summary: free-shipping bar */

	/* Page-specific colours the Oxygen pages had typed in (not part of the ACSS palette). */
	--color-notice-text: #493b3b; /* vybavovanie-objednavok-pocas-sviatkov */
	--color-danger-button: #c93850; /* odhlasenie-z-odberu-noviniek "Nie" button */
	--color-input-hover-border: #8ed1fc; /* registracia-na-firmu */
	--color-christmas-start: rgb(253 63 135); /* snippet 695084 gradient */
	--color-christmas-end: rgb(67 107 255);
	--color-christmas-end-hover: rgb(0 33 155);
	/* FAQ accordion neutrals (Oxygen "oxel accordion" class colours). */
	--color-faq-label: #333333;
	--color-faq-icon: #374047;
	--color-faq-row-background: #f9f9fa;

	/* Legacy WooCommerce look of Oxygen's global styles (universal.css). */
	--wc-legacy-accent: rgb(101 190 194);
	--wc-legacy-link: rgb(103 153 178);
	--wc-legacy-border: rgb(211 206 210);
	--wc-legacy-text: rgb(102 102 102);
	--wc-legacy-button-hover: rgb(153 153 153);
	--wc-legacy-info: rgb(0 173 239);
	--wc-legacy-error: rgb(233 97 153);
	--shadow-wc-legacy-focus: 0 0 5px var(--wc-legacy-accent); /* focus / hover glow of fields and radios */

	/* ---- Typography ---- */
	--font-body: var(--chakra-fonts-body, "Mukta", sans-serif);
	--text-xs: clamp(0.96rem, calc(-0.0583821874vw + 0.9786823rem), 0.9004501688rem);
	--text-s: clamp(1.2rem, calc(0.0002941912vw + 1.1999058588rem), 1.200300075rem);
	--text-m: clamp(1.5rem, calc(0.0980392157vw + 1.468627451rem), 1.6rem);
	--text-l: clamp(1.875rem, calc(0.252745098vw + 1.7941215686rem), 2.1328rem);
	--text-xl: clamp(2.34375rem, calc(0.4894827451vw + 2.1871155216rem), 2.8430224rem);
	--text-xxl: clamp(2.9296875rem, calc(0.843197411vw + 2.6598643285rem), 3.7897488592rem);
	--h1: clamp(2.7648rem, calc(1.46928183vw + 2.2946298144rem), 4.2634674666rem);
	--h2: clamp(2.304rem, calc(0.8768629412vw + 2.0234038588rem), 3.1984002rem);
	--h3: clamp(1.92rem, calc(0.47vw + 1.7696rem), 2.3994rem);
	--h4: clamp(1.6rem, calc(0.1960784314vw + 1.537254902rem), 1.8rem);
	--h5: 1.2rem;
	--h6: 1.1rem;
	--text-line-height: calc(6px + 2ex);
	--heading-line-height: calc(4px + 2ex);
	--heading-font-weight: 700;

	/* ---- Spacing ---- */
	--space-xs: clamp(1.1111111111rem, calc(-0.1307189542vw + 1.1529411765rem), 0.9777777778rem);
	--space-s: clamp(1.3333333333rem, calc(0.1307189542vw + 1.291503268rem), 1.4666666667rem);
	--space-m: clamp(1.6rem, calc(0.5882352941vw + 1.4117647059rem), 2.2rem);
	--space-l: clamp(1.92rem, calc(1.3529411765vw + 1.4870588235rem), 3.3rem);
	--space-xl: clamp(2.304rem, calc(2.5941176471vw + 1.4738823529rem), 4.95rem);
	--space-xxl: clamp(2.7648rem, calc(4.5688235294vw + 1.3027764706rem), 7.425rem);
	--section-space-xs: clamp(2.2222222222rem, calc(1.6557734205vw + 1.6923747277rem), 3.9111111111rem);
	--section-space-s: clamp(2.6666666667rem, calc(3.137254902vw + 1.662745098rem), 5.8666666667rem);
	--section-space-m: clamp(3.2rem, calc(5.4901960784vw + 1.4431372549rem), 8.8rem);
	--section-space-l: clamp(3.84rem, calc(9.1764705882vw + 0.9035294118rem), 13.2rem);
	--section-space-xl: clamp(4.608rem, calc(14.8941176471vw + -0.1581176471rem), 19.8rem);
	--section-space-xxl: clamp(5.5296rem, calc(23.6964705882vw + -2.0532705882rem), 29.7rem);

	/* ---- Layout ---- */
	/* Same box as the redesign's .wa-container (1240px incl. gutter), so sections, header rows and the
	   megamenu line up with the new templates. The gutter steps up past 720px, as on .wa-container. */
	--content-width: var(--nd-container);
	--section-padding-x: var(--nd-gutter-sm);
	--section-padding-block: var(--section-space-m);
	--gutter: var(--section-padding-x);
	--content-gap: var(--space-m);
	--container-gap: var(--space-xl);
	--grid-gap: var(--space-m);
	--grid-gap-fixed: 20px; /* fixed grid gap typed on Oxygen elements (cart reviews, holiday gifts, SIMka, Christmas links) */

	/* ---- Radius ---- */
	--radius: 1rem;
	--radius-xs: 1.2345679012rem;
	--radius-s: 1.1111111111rem;
	--radius-m: 1rem;
	--radius-l: 0.9rem;
	--radius-xl: 0.81rem;
	--radius-xxl: 0.729rem;
	--radius-50: 50%;

	/* ---- Motion / focus ---- */
	--transition-duration: 0.3s;
	--transition-timing: ease-in-out;
	--transition: background var(--transition-duration) var(--transition-timing) 0s, color var(--transition-duration) var(--transition-timing) 0s, border var(--transition-duration) var(--transition-timing) 0s, translate var(--transition-duration) var(--transition-timing) 0s;
	--ease-offcanvas: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-underline: cubic-bezier(0.28, 0.75, 0.22, 0.95);
	--ease-menu-underline: cubic-bezier(0.175, 0.885, 0.32, 1.15);
	--focus-width: 2px;
	--focus-offset: 0.25em;

	/* ---- Component sizes ---- */
	--header-control-height: 50px;
	--wa-search-height: 4.8rem;
	--offcanvas-width: 320px;
}

/*
 * Compat block: plugins and Code Snippets (wooptima-*, snippets 165/189/406/5438/
 * 695026/723593/742434 ...) still reference ACSS names. The colour/space/text/radius
 * names above already carry the exact ACSS values; these are the remaining ACSS globals.
 * Plugins that set their own value on a narrower selector still win. --border-color and
 * --text-color--hover are not ACSS globals (plugins define them) and stay undefined.
 */
:root {
	--text-color: var(--black);
	--border-width: 1px;
	--btn-radius: 0;
	--body-color: var(--black);
}

@media (min-width: 721px) {
	:root {
		--section-padding-x: var(--nd-gutter);
	}
}

/* ---- Redesign (najlepsiemobily layout) ----
 * Source: design/najlepsiemobily-kategoria-desktop.html (#/kategoria), computed styles.
 * Layout, spacing, sizes and type scale = mockup 1:1 (px, mockup units).
 * Colours, radii and font = mobilky: every --nd-c-* / --nd-radius-* / --nd-font alias
 * points at the mobilky tokens above, so swapping those re-skins the redesign.
 * Category nav / megamenu is OUT OF SCOPE (keeps the current Oxygen-port tokens).
 * Mockup breakpoints (max-width) as mobile-first min-width literals, for reference:
 * 521 / 721 / 861 / 1025 / 1101 px (media queries cannot use custom properties).
 * Mapping notes: /tmp/d2w/tokens-map.md.
 */
:root {
	/* -- Font (mockup Rubik -> mobilky body font) -- */
	--nd-font: var(--font-body);
	--nd-fw-regular: 400;
	--nd-fw-medium: 500;
	--nd-fw-semibold: 600;
	--nd-fw-bold: 700;

	/* -- Colour roles (aliases to mobilky) -- */
	--nd-c-brand: var(--primary);                 /* mockup --brand #2498ca */
	--nd-c-brand-hover: var(--primary-hover);     /* mockup --brand-dark as hover */
	--nd-c-brand-strong: var(--primary-dark);     /* mockup --brand-dark as text (.pc-perk.ok b) */
	--nd-c-brand-tint: var(--primary-ultra-light);/* mockup --brand-tint #f3fbff */
	--nd-c-brand-tint-2: var(--secondary);        /* mockup --brand-tint2 #e3f4fc (faint borders, track) */
	--nd-c-brand-border: var(--primary-light);    /* mockup #bfe3f2 (.pc-dist.eu border) */
	--nd-c-cta: var(--accent);                    /* mockup --cta #a1c900 */
	--nd-c-cta-hover: var(--accent-semi-dark);    /* mockup --cta-dark #8db300 (darker on hover) */
	--nd-c-on-brand: var(--white);
	--nd-c-on-cta: var(--white);
	--nd-c-ink: var(--base);                      /* mockup --ink #444 (body text) */
	--nd-c-head: var(--base-ultra-dark);          /* mockup --head #1a202c */
	--nd-c-muted: var(--base-medium);             /* mockup --muted #8a949e */
	--nd-c-placeholder: var(--base-semi-light);   /* mockup #a8b2bb */
	--nd-c-line: var(--base-light);               /* mockup --line #e8eef2 (card/box borders) */
	--nd-c-line-soft: var(--shade-light);         /* mockup #f1f4f6 (topbar rule), #e4e9ed (search) */
	--nd-c-control-border: var(--base-light);     /* mockup #cfdae2 (checkbox) */
	--nd-c-surface: var(--white);                 /* mockup --card #fff */
	--nd-c-surface-muted: var(--base-ultra-light);/* mockup #eef1f3 (.pc-perk), #f1f5f8 (subcat logo) */
	--nd-c-disabled: var(--base-light);           /* mockup #c8d0d6 (disabled btn) */
	--nd-c-account-bg: var(--color-user-btn-bg);  /* mockup #ececec */
	--nd-c-account-icon: var(--color-user-btn-text); /* mockup #8c8c8c */
	--nd-c-badge: var(--primary-dark);            /* mockup #1d2a4d (cart count) */
	--nd-c-footer-bg: var(--secondary-ultra-light); /* mockup #eaf5fa */
	--nd-c-footer-bottom: var(--primary);         /* mockup brand bar (live copyright = --primary) */
	--nd-c-backdrop: var(--color-backdrop);       /* mockup rgba(26,32,44,.5) */
	--nd-c-ok: var(--accent-dark);                /* mockup --ok #16a20c (in stock) */
	--nd-c-stock: var(--accent);                  /* "Skladom", same green as the product page --ok */

	/* Primitives mobilky lacks */
	--nd-c-sale: #ea7e1e;        /* mobilky live sale label (wooptima-product-labels); mockup --akcia #cd1515 */
	--nd-c-out: var(--color-required); /* mockup #cd1515 (out of stock) */
	--nd-c-notice-alert: #dd3333; /* Oznam type Upozornenie (the red the Easy Notification Bar used) */
	--nd-c-notice-info: var(--nd-c-brand);   /* Oznam type Informácia */
	--nd-c-notice-action: var(--nd-c-cta);   /* Oznam type Akcia */
	--nd-c-rating: #f8e923;      /* mockup rating disc; not a brand colour */
	--nd-c-on-rating: var(--base-ultra-dark);
	--nd-c-star: #ffc107;        /* wooptima-reviews star (.amtc-star-rating__filled), tile star row */
	--nd-c-star-empty: #e0e0e0;  /* wooptima-reviews empty star (.amtc-star-rating__empty) */

	/* -- Radii (mockup -> mobilky) -- */
	--nd-radius: var(--radius);          /* mockup --radius 10px (boxes, cards, grid) */
	--nd-radius-m: var(--radius-xl);     /* mockup 8px (inputs, select, pager, chips) */
	--nd-radius-s: var(--radius-xxl);    /* mockup 6px (subcat logo, adapter icon) */
	--nd-radius-xs: var(--radius-xxl);   /* mockup 4px/3px (tags, perks, checkbox, save) */
	--nd-radius-pill: var(--radius-xxl); /* mockup 999px pills: mobilky buttons/search are not pills */
	--nd-radius-btn: var(--radius-xxl);  /* mockup --btn-radius 999px; live "Do kosika" = --radius-xxl */
	--nd-radius-round: var(--radius-50); /* avatars, rating disc, swatches, mobile cart */
	--nd-radius-track: 2px;              /* price slider track (geometry) */

	/* -- Shadows (mockup geometry, mobilky colour) -- */
	--nd-shadow: 0 2px 10px var(--primary-trans-10);
	--nd-shadow-lg: 0 10px 30px var(--shade-ultra-dark-trans-20);
	--nd-shadow-search: 0 1px 3px color-mix(in srgb, var(--primary) 6%, transparent);
	--nd-shadow-sticky: 0 2px 10px color-mix(in srgb, var(--base-ultra-dark) 7%, transparent);
	--nd-shadow-badge: 0 1px 3px color-mix(in srgb, var(--black) 14%, transparent);
	--nd-shadow-badge-ring: 0 0 0 2px var(--white);

	/* -- Motion -- */
	--nd-dur-fast: 0.15s;                /* tile / row hover */

	/* -- Type scale (mockup px) -- */
	/* Mukta draws ~10 % smaller than the mockup's Rubik at the same px (x-height 47 vs 52, text width 0.89x),
	 * so every mockup size is scaled up to read the same. */
	--nd-fs-scale: 1.1;
	--nd-fs-10: calc(10px * var(--nd-fs-scale));
	--nd-fs-10-5: calc(10.5px * var(--nd-fs-scale));
	--nd-fs-11: calc(11px * var(--nd-fs-scale));
	--nd-fs-12: calc(12px * var(--nd-fs-scale));
	--nd-fs-12-5: calc(12.5px * var(--nd-fs-scale));
	--nd-fs-13: calc(13px * var(--nd-fs-scale));
	--nd-fs-13-5: calc(13.5px * var(--nd-fs-scale));
	--nd-fs-14: calc(14px * var(--nd-fs-scale));
	--nd-fs-14-5: calc(14.5px * var(--nd-fs-scale));
	--nd-fs-15: calc(15px * var(--nd-fs-scale));   /* body (--fs) */
	--nd-fs-15-5: calc(15.5px * var(--nd-fs-scale));
	--nd-fs-16: calc(16px * var(--nd-fs-scale));
	--nd-fs-17: calc(17px * var(--nd-fs-scale));
	--nd-fs-19: calc(19px * var(--nd-fs-scale));
	--nd-fs-20: calc(20px * var(--nd-fs-scale));
	--nd-fs-22: calc(22px * var(--nd-fs-scale));
	--nd-fs-24: calc(24px * var(--nd-fs-scale));
	--nd-fs-30: calc(30px * var(--nd-fs-scale));
	--nd-fs-body: var(--nd-fs-15);
	--nd-fs-h1: var(--nd-fs-30);         /* 24px <=860 */
	--nd-fs-h1-sm: var(--nd-fs-24);
	--nd-fs-sec-h: var(--nd-fs-24);      /* .home-sec-h h2, 19px mobile */
	--nd-fs-sec-h-sm: var(--nd-fs-19);
	--nd-fs-price: var(--nd-fs-20);      /* 16px mobile */
	--nd-fs-price-sm: var(--nd-fs-16);
	--nd-lh-body: 1.5;
	--nd-lh-head: 1.25;
	--nd-lh-tight: 1.15;
	--nd-lh-name: 1.4;
	--nd-fs-tile-name: 14px;            /* product name on every product tile; a flat 14px, not scaled */
	--nd-lh-lede: 1.6;
	--nd-lh-seo: 1.65;
	--nd-lh-badge: 1.05;                 /* energy scale, Home Credit disc */
	--nd-ls-phone: 0.2px;
	--nd-ls-brand: 0.01em;               /* brand strip tiles */
	--nd-ls-tight: -0.02em;              /* Home Credit rate */

	/* -- Spacing scale (mockup px) -- */
	--nd-sp-2: 2px;
	--nd-sp-3: 3px;
	--nd-sp-4: 4px;
	--nd-sp-5: 5px;
	--nd-sp-6: 6px;
	--nd-sp-7: 7px;
	--nd-sp-8: 8px;
	--nd-sp-9: 9px;
	--nd-sp-10: 10px;
	--nd-sp-11: 11px;
	--nd-sp-12: 12px;
	--nd-sp-13: 13px;
	--nd-sp-14: 14px;
	--nd-sp-15: 15px;
	--nd-sp-16: 16px;
	--nd-sp-18: 18px;
	--nd-sp-20: 20px;
	--nd-sp-22: 22px;
	--nd-sp-24: 24px;
	--nd-sp-26: 26px;
	--nd-sp-28: 28px;
	--nd-sp-30: 30px;
	--nd-sp-32: 32px;
	--nd-sp-36: 36px;
	--nd-sp-40: 40px;
	--nd-sp-44: 44px;
	--nd-sp-48: 48px;
	--nd-sp-52: 52px;
	--nd-sp-56: 56px;

	/* -- Layout -- */
	--nd-container: 1240px;
	--nd-gutter: 20px;                   /* 12px <=720 */
	--nd-gutter-sm: 12px;
	--nd-aside-w: 264px;                 /* 230px <=1100 */
	--nd-aside-w-md: 230px;
	--nd-layout-gap: 24px;               /* 18px <=1100 */
	--nd-layout-gap-md: 18px;
	--nd-drawer-w: min(340px, 88vw);     /* filter drawer <=860 */
	--nd-menu-drawer-w: 290px;           /* mobile menu, max 84vw */
	--nd-seo-max-h: 158px;
	--nd-seo-fade: 70px;
	--nd-measure-lede: 74ch;
	--nd-measure-seo: 92ch;

	/* -- Component sizes -- */
	--nd-topbar-h: 56px;
	--nd-avatar: 38px;
	--nd-logo-h: 42px;                   /* 36px <=720 */
	--nd-logo-h-sm: 36px;
	--nd-search-h: 47px;
	--nd-search-h-sm: 42px;              /* phone search row */
	--nd-search-btn: 36px;
	--nd-account-h: 46px;
	--nd-cart-h: 44px;
	--nd-cart-badge: 18px;               /* 20px mobile */
	--nd-cart-badge-sm: 20px;
	--nd-tap: 46px;                      /* mobile min tap, hamburger, mobile cart */
	--nd-icon-xs: 15px;                  /* swatch */
	--nd-icon-s: 17px;                   /* checkbox */
	--nd-icon-m: 21px;                   /* account icon */
	--nd-icon-l: 26px;                   /* mobile account icon, payment logo h */
	--nd-icon-xl: 30px;                  /* benefit img, subcat logo, mobile cart icon */
	--nd-subcat-h: 48px;
	--nd-fgroup-h: 41px;
	--nd-fcheck-h: 31px;
	--nd-track-h: 4px;
	--nd-select-h: 37px;
	--nd-pager-item: 38px;
	--nd-atc-w: 760px;                   /* "Produkt bol pridany do kosika" popup, max width */
	--nd-atc-thumb: 62px;                /* popup product image */
	--nd-atc-check: 24px;                /* popup header check disc */
	--nd-atc-btn-h: 52px;                /* popup footer buttons */
	--nd-atc-z: 100000;                  /* above the sticky header (1000) and the minicart */
	--nd-btn-h: 44px;                    /* pager-more, cart */
	--nd-btn-cart-h: 46px;               /* .btn-mini */
	--nd-pcard-img-h: 230px;             /* 180px <=860 */
	--nd-pcard-img-h-sm: 180px;
	--nd-rating: 36px;                   /* 42px mobile */
	--nd-rating-sm: 42px;
	--nd-border-strong: 1.5px;           /* mockup 1.5px control borders */
	--nd-opacity-disabled: 0.42;
	--nd-opacity-arrow-disabled: 0.35;   /* carousel arrows at the ends (mockup .pager-next:disabled) */
	--nd-opacity-sep: 0.5;
	--nd-footer-logo-h: 34px;
	--nd-lh-snug: 1.3;
	--nd-logo-max-w-md: 185px;           /* header logo cap 721-1023 */
	--nd-header-sticky-h: 128px;         /* fixed .wa-header.is-sticky height from 1025px (sticky aside offset) */
	--nd-cart-sm: 40px;                  /* minicart wrapper <480 (baseline) */
	--nd-cart-min-w: 50px;               /* minicart wrapper min-width 480-1023 (baseline) */
	--nd-close-btn: 40px;                /* off-canvas close button <480 */
	--nd-icon-close: 16px;
	--nd-icon-close-lg: 22px;
	--nd-adminbar-h: 46px;               /* WP admin bar 601-782 */
	--nd-adminbar-h-lg: 32px;            /* WP admin bar >=783 */
	--nd-reviews-badge-max-h: 86px;
	--nd-reviews-nav: 34px;
	--nd-reviews-card-w: 200px;          /* summary column >=861 */
	--nd-reviews-avatar: 34px;
	--nd-sec-h-bar-w: 54px;              /* section heading underline */
	--nd-sec-h-bar-h: 3px;

	/* Colour facet swatches (mockup values); graphite/gold/red/pink/brown fall back to palette colours in instant-search.css. */
	--nd-sw-white: #f2f3f4;
	--nd-sw-purple: #8a7fb5;
	--nd-sw-blue: #2b3d5c;
	--nd-sw-orange: #d9662a;
	--nd-sw-silver: #d8dbdd;
	--nd-sw-green: #4b7a5a;
	--nd-sw-black: #1c1c1e;
	--nd-sw-gray: #6b7076;

	/* EU energy class arrows (product gallery + product cards), Gallery::ENERGY_COLORS. */
	--nd-c-energy-a: #00a651;
	--nd-c-energy-b: #51b747;
	--nd-c-energy-c: #bdd62e;
	--nd-c-energy-d: #fff200;
	--nd-c-energy-e: #fdb913;
	--nd-c-energy-f: #f37021;
	--nd-c-energy-g: #ed1c24;

	/* Homepage (pages/hlavna-stranka.css + components/product-card.css), mockup home route. */
	--nd-home-sec-pt: 34px;              /* .home-sec padding 34px 0 6px */
	--nd-home-sec-pb: 6px;
	--nd-carousel-arrow: 40px;           /* .carousel-arrow, hidden <=720 */
	--nd-carousel-arrow-offset: -16px;
	--nd-pcard-img-h-home: 150px;        /* .pc-img */
	--nd-pcard-w-sm: calc((100% - var(--nd-sp-28)) / 2); /* <=720: two cards of the carousel width, the next peeks in 28px */
	--nd-pcard-w-min: 180px;             /* >=721: narrowest "Obľúbené v kategórii" card before the strip scrolls */
	--nd-brand-tile-w: calc((100vw - 200px) / 8);
	--nd-brand-tile-w-min: 120px;
	--nd-brand-tile-w-max: 170px;
	--nd-brand-tile-w-sm: 130px;         /* <=640 */
	--nd-brand-tile-h: 78px;
	--nd-brand-tile-h-sm: 62px;
	--nd-brand-tile-radius: 10px;
	--nd-brand-fade: 60px;               /* 28px <=640 */
	--nd-brand-fade-sm: 28px;
	--nd-brand-speed: 40s;
	--nd-c-brand-fade-from: var(--nd-c-surface);
	--nd-c-brand-fade-to: color-mix(in srgb, var(--nd-c-surface) 0%, transparent);
	--nd-shadow-tile: 0 2px 10px color-mix(in srgb, var(--base-ultra-dark) 7%, transparent);

	/* Shop reviews carousel (components/shop-reviews.css), mockup .rev-slide 84% <=720. */
	--nd-reviews-peek: 16%;              /* track right padding: next card peeks in */
}