/*!
 * Kumo CMS: base stylesheet of the public site (2.0).
 * Written for Kumo on top of Bootstrap 5.3 (MIT). It gives the shared markup
 * (header, navigation, page header, footer, blog, elements and the utility
 * class names that blocks and saved content use) its structure and a neutral
 * look; the design kit (cms-design.css) and each theme's design.css set the
 * theme's look. Colours come from the customizer (:root --primary … --light).
 */

/* ---------------------------------------------------------------- tokens */
:root {
	--primary: #0088CC; --primary-100: #0077B3; --primary-200: #006EA6; --primary-300: #006699; --primary--100: #0099E6; --primary--200: #00A1F2; --primary-inverse: #FFFFFF;
	--secondary: #E36159; --secondary-inverse: #FFFFFF;
	--tertiary: #2BAAB1; --tertiary-inverse: #FFFFFF;
	--quaternary: #383F48; --quaternary-inverse: #FFFFFF;
	--dark: #212529; --dark-100: #1A1D21; --dark-300: #0F1113; --dark--100: #2D3238; --dark--200: #343A40; --dark-inverse: #FFFFFF;
	--light: #FFFFFF; --light-300: #E6E6E6; --light--200: #FFFFFF; --light-inverse: #777777;
	--default: #777777;
	--grey: #969696; --grey-100: #F7F7F7; --grey-200: #EDEDED; --grey-300: #E0E0E0; --grey-500: #A6A6A6;
	--border-radius: 4px;
	--kumo-line: rgba(0, 0, 0, .08);
	--kumo-header-height: 72px;
	--bs-border-radius: var(--border-radius);
	--bs-btn-border-radius: var(--border-radius);
	--bs-link-color: var(--primary);
	--bs-link-hover-color: var(--primary-100);
}

/* ------------------------------------------------------------------ base */
html { overflow-x: hidden; }
/* Instant jumps: Bootstrap turns on smooth scrolling, which makes scripted scrolling and in-page links lag */
:root { scroll-behavior: auto; }
body { margin: 0; background-color: var(--light); color: var(--default); font-size: 14px; line-height: 26px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
@media (max-width: 575.98px) { body { font-size: 13px; } }
.body { background-color: var(--light); }
::selection { color: var(--primary-inverse); background: var(--primary); }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-100); }
a:not([class*="btn"]):hover { text-decoration: underline; }
li { line-height: 24px; }
p { margin: 0 0 20px; line-height: 26px; }
p.lead, .lead { font-size: 1.15rem; letter-spacing: -.05em; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--dark); font-weight: 200; letter-spacing: -.05em; }
h1 { font-size: 2.6em; line-height: 44px; margin: 0 0 32px; }
h2 { font-size: 2.2em; font-weight: 300; line-height: 42px; margin: 0 0 32px; }
h3 { font-size: 1.8em; font-weight: 400; line-height: 24px; margin-bottom: 33px; text-transform: uppercase; }
h4 { font-size: 1.4em; font-weight: 700; line-height: 27px; margin: 0 0 14px; }
h5 { font-size: 1em; font-weight: 700; line-height: 18px; margin: 0 0 14px; text-transform: uppercase; }
h6 { font-size: 1em; font-weight: 400; line-height: 18px; margin: 0 0 14px; color: var(--dark--200); }
@media (max-width: 575.98px) { h2 { line-height: 40px; } }
small, .small { font-size: 85%; }
hr { height: 1px; margin: 22px 0; border: 0; background: var(--kumo-line); opacity: 1; }
blockquote { margin: 0 0 20px; padding: 2px 20px; border-left: 5px solid var(--grey-200); font-size: 1.1em; }
img { max-width: 100%; }
.main { min-height: 40vh; }
@media (min-width: 1200px) {
	.container:not(.container-bs):not(.container-xl-custom):not(.container-xxl-custom) { max-width: 1140px; }
}

/* Skip link and a visible keyboard focus everywhere */
.cms-skip-link { position: absolute; left: -9999px; top: 8px; z-index: 10010; padding: 8px 14px; background: var(--dark); color: #fff; border-radius: var(--border-radius); }
.cms-skip-link:focus { left: 8px; color: #fff; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --------------------------------------------------------------- buttons */
.btn { font-size: .8rem; font-weight: 700; padding: .533rem .933rem; cursor: pointer; }
.btn.btn-xs { font-size: .7rem; padding: .2rem .5rem; }
.btn.btn-sm { font-size: .75rem; }
.btn.btn-lg { font-size: 1rem; padding: .5rem 1rem; }
.btn-modern { text-transform: uppercase; font-size: .8em; padding: .8rem 1.5rem; font-weight: 700; }
.btn:focus, .btn:active, .btn.active { box-shadow: none; }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-color: var(--primary-inverse); --bs-btn-hover-bg: var(--primary-100); --bs-btn-hover-border-color: var(--primary-100); --bs-btn-hover-color: var(--primary-inverse); --bs-btn-active-bg: var(--primary-200); --bs-btn-active-border-color: var(--primary-200); --bs-btn-active-color: var(--primary-inverse); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary); }
.btn-secondary { --bs-btn-bg: var(--secondary); --bs-btn-border-color: var(--secondary); --bs-btn-color: var(--secondary-inverse); --bs-btn-hover-bg: var(--secondary); --bs-btn-hover-border-color: var(--secondary); --bs-btn-hover-color: var(--secondary-inverse); }
.btn-tertiary { --bs-btn-bg: var(--tertiary); --bs-btn-border-color: var(--tertiary); --bs-btn-color: var(--tertiary-inverse); --bs-btn-hover-bg: var(--tertiary); --bs-btn-hover-color: var(--tertiary-inverse); }
.btn-quaternary { --bs-btn-bg: var(--quaternary); --bs-btn-border-color: var(--quaternary); --bs-btn-color: var(--quaternary-inverse); --bs-btn-hover-bg: var(--quaternary); --bs-btn-hover-color: var(--quaternary-inverse); }
.btn-dark { --bs-btn-bg: var(--dark); --bs-btn-border-color: var(--dark); --bs-btn-color: var(--dark-inverse); --bs-btn-hover-bg: var(--dark--100); --bs-btn-hover-border-color: var(--dark--100); }
.btn-light { --bs-btn-bg: var(--light); --bs-btn-border-color: #D9D9D9; --bs-btn-color: var(--default); --bs-btn-hover-bg: var(--grey-100); --bs-btn-hover-border-color: #CFCFCF; }
html body .btn-light, html body .btn-outline.btn-light { border-color: #D9D9D9 #D9D9D9 #BFBFBF; color: var(--default); }
.btn-outline { border-width: 2px; }
.btn-outline.btn-primary { --bs-btn-bg: transparent; --bs-btn-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-color: var(--primary-inverse); }
.btn-px-5 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
.btn.btn-xl { font-size: 1rem; padding: .8rem 2rem; }
.btn-rounded { border-radius: 35px; }

/* ----------------------------------------------------------------- forms */
form label { font-weight: normal; }
label.required:after { content: "*"; position: relative; top: -2px; margin: .3em; font-size: .8em; }
.form-group { margin-bottom: 1rem; }
.form-control, .form-select { border-color: #DFE2E6; border-radius: var(--border-radius); }
.form-control:not(.form-control-sm):not(.form-control-lg) { font-size: .85rem; line-height: 1.85; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem var(--primary-rgba-20, rgba(0, 136, 204, .2)); }
textarea { resize: vertical; }
select { border: 1px solid #E5E7E9; border-radius: 6px; outline: none; }
input[type="search" i]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --------------------------------------------------------------- header */
#header { position: relative; z-index: 1030; }
#header .header-body { position: relative; display: flex; flex-direction: column; width: 100%; background: var(--light); border-top: 3px solid var(--grey-200); border-bottom: 1px solid transparent; transition: min-height .3s ease, transform .3s ease, box-shadow .3s ease; z-index: 1001; }
#header .header-container { position: relative; display: flex; flex-flow: row wrap; align-items: center; transition: min-height .3s ease; }
#header .header-container.header-container-height-xs { height: 80px; } #header .header-container.header-container-height-sm { height: 100px; } #header .header-container.header-container-height-md { height: 125px; } #header .header-container.header-container-height-lg { height: 145px; }
#header.header-effect-shrink .header-container { min-height: 100px; }
#header.header-effect-shrink .header-logo { display: flex; align-items: center; }
#header .header-logo a { display: block; }
#header .container { position: relative; }
#header .header-row { display: flex; flex-grow: 1; align-items: center; align-self: stretch; max-height: 100%; }
#header .header-column { display: flex; flex-grow: 1; flex-direction: column; align-items: center; align-self: stretch; }
#header .header-column .header-row { justify-content: inherit; }
#header .header-logo { position: relative; z-index: 1; margin: 1rem 0; }
#header .header-logo img { position: relative; max-width: none; transition: width .3s ease, height .3s ease, top .3s ease; }
#header .header-nav { display: flex; align-items: center; min-height: 70px; padding: 1rem 0; }
#header .header-nav-features { position: relative; padding-left: 20px; margin-left: 10px; }
#header .header-nav-features .header-nav-feature + .header-nav-feature { margin-left: 12px; }
#header .header-nav-features .header-nav-feature { position: relative; }
#header .header-nav-features .header-nav-feature > a { color: var(--dark); }
#header .header-btn-collapse-nav { display: none; margin: 0 0 0 1rem; background: var(--primary); color: var(--primary-inverse); }
#header .header-top { display: flex; align-items: center; border-bottom: 1px solid var(--kumo-line); }
#header .header-nav-top { display: flex; align-items: center; }
#header .header-top .nav > li > a, #header .header-top .nav > li > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: .9em; color: inherit; }
#header .header-nav-top .nav > li > a { color: inherit; }

/* Search feature: a small drop-down form */
#header .header-nav-features-search { position: relative; }
#header .header-nav-features-toggle { display: block; color: #444; }
#header .header-nav-features .header-nav-top-icon { position: relative; top: -1px; font-size: .8rem; color: #444; }
#header .header-nav-features-dropdown { position: absolute; top: calc(100% + 12px); right: -10px; z-index: 1005; display: none; width: 300px; padding: 12px; background: var(--light); border-radius: var(--border-radius); box-shadow: 0 10px 30px 10px rgba(0, 0, 0, .05); }
#header .header-nav-features-dropdown.show { display: block; }
#header .simple-search .form-control { border-radius: 20px 0 0 20px; border-right: 0; }
#header .simple-search .btn { border: 1px solid #DFE2E6; border-left: 0; border-radius: 0 20px 20px 0; background: var(--light); color: var(--dark); }

/* Navigation: desktop */
#header .header-nav-main nav > ul { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
#header .header-nav-main nav > ul > li { position: relative; }
#header .header-nav-main nav > ul > li > a { display: inline-flex; align-items: center; white-space: normal; color: var(--dark); font-weight: 700; font-size: 14px; text-decoration: none; }
#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a, #header .header-nav.header-nav-line:not(.header-nav-light-text) nav > ul > li > a { color: #444; }
#header .header-nav-main .dropdown-menu { --bs-dropdown-link-active-bg: transparent; }
#header .header-nav-main nav > ul li a.dropdown-toggle:after { content: none; }
#header .kumo-sub-toggle { display: none; }
@media (min-width: 992px) {
	#header .header-nav-main { display: flex !important; height: auto !important; align-self: stretch; }
	#header .header-nav-main nav { display: flex !important; }
	#header .header-nav { flex-grow: 1; justify-content: flex-end; align-self: stretch; }
	#header .header-nav.header-nav-links, #header .header-nav.header-nav-line { padding: 0; }
	#header .header-nav-main nav > ul > li { height: 100%; align-self: stretch; margin-left: 2px; }
	#header .header-nav-main nav > ul > li > a { padding: .5rem .9rem; border-radius: var(--border-radius); }
	#header .header-nav.header-nav-links nav > ul > li > a, #header .header-nav.header-nav-line nav > ul > li > a { position: relative; min-height: 60px; height: 100%; margin: 1px 0 0; padding: 0 .9rem; background: transparent !important; border-radius: 0; }
	#header .header-nav.header-nav-line nav > ul > li > a:before { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 0; height: 3px; background: var(--primary); opacity: 0; transition: opacity .2s ease; }
	#header .header-nav.header-nav-line nav > ul > li > a.active:before, #header .header-nav.header-nav-line nav > ul > li:hover > a:before { opacity: 1; }
	#header .header-nav.header-nav-top-line nav > ul > li > a:before { top: -1px; bottom: auto; }
	/* Sub-menus open on hover and on keyboard focus */
	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu { position: absolute; top: 100%; left: 0; display: block; min-width: 220px; margin: 0; padding: 6px 0; text-align: left; border: 0; border-top: 3px solid var(--primary); border-radius: 0 0 var(--border-radius) var(--border-radius); box-shadow: 0 15px 30px -5px rgba(0, 0, 0, .1); opacity: 0; visibility: hidden; transform: translate3d(0, -5px, 0); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
	#header .header-nav-main nav > ul > li.dropdown:hover > .dropdown-menu,
	#header .header-nav-main nav > ul > li.dropdown:focus-within > .dropdown-menu,
	#header .header-nav-main nav > ul > li.dropdown.is-open > .dropdown-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	#header .header-nav-main nav > ul > li > a:after { display: none; }
	#header .header-nav-main li.is-closed > .dropdown-menu { opacity: 0 !important; visibility: hidden !important; }
	#header .header-nav-main .dropdown-menu li { position: relative; }
	#header .header-nav-main .dropdown-menu li a { display: block; padding: 7px 18px; color: var(--default); font-size: .85em; font-weight: 400; text-transform: none; text-decoration: none; border-bottom: 1px solid var(--grey-100); white-space: nowrap; }
	#header .header-nav-main .dropdown-menu li:last-child > a { border-bottom: 0; }
	#header .header-nav-main .dropdown-menu li a:hover, #header .header-nav-main .dropdown-menu li a:focus { background: var(--grey-100); color: var(--dark); }
	#header .header-nav-main .dropdown-submenu > .dropdown-menu { position: absolute; top: -6px; left: 100%; display: block; min-width: 200px; padding: 6px 0; border: 0; border-radius: var(--border-radius); box-shadow: 0 15px 30px -5px rgba(0, 0, 0, .1); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
	#header .header-nav-main .dropdown-submenu:hover > .dropdown-menu, #header .header-nav-main .dropdown-submenu:focus-within > .dropdown-menu { opacity: 1; visibility: visible; transition-delay: 0s; }
	#header .header-nav-main .dropdown-submenu > a:after { content: "\203A"; float: right; margin-left: 10px; opacity: .6; }
	/* Mega menu */
	#header .header-nav-main nav > ul > li.dropdown-mega { position: static; }
	#header .header-nav-main nav > ul > li.dropdown-mega > .dropdown-menu { left: 15px; right: 15px; width: auto; }
	#header .dropdown-mega-content { padding: 20px 30px; }
	#header .dropdown-mega-sub-title { display: block; margin: 0 0 8px; color: var(--dark); font-size: .85em; font-weight: 700; text-transform: uppercase; }
	#header .dropdown-mega-sub-nav { margin: 0 0 16px; padding: 0; list-style: none; }
	#header .dropdown-mega-sub-nav li a { padding: 4px 0 !important; border: 0 !important; }
}

/* Navigation: phones and tablets (the menu folds under the header) */
@media (max-width: 991.98px) {
	#header .header-btn-collapse-nav { position: relative; z-index: 1; display: block; min-width: 44px; min-height: 40px; }
	#header .header-nav { display: flex; align-items: center; }
	#header .header-nav-main { position: absolute; top: 100%; left: 50%; width: 100%; transform: translate3d(-50%, 0, 0); background: transparent; }
	#header .header-nav-main:before { content: ""; position: absolute; top: 0; left: 50%; z-index: -1; display: block; width: 100vw; height: 100%; background: var(--light); transform: translateX(-50%); }
	#header .header-nav-main nav { max-height: 60vh; overflow: hidden auto; padding: 0 15px; }
	#header .header-nav-main nav:not(.show):not(.collapsing) { display: none; }
	#header .header-nav-main nav > ul { flex-direction: column; align-items: stretch; padding: 15px 0; }
	#header .header-nav-main nav > ul li { position: relative; display: block; margin: 0; padding: 0; border-bottom: 1px solid var(--grey-200); }
	#header .header-nav-main nav > ul li:last-child { border-bottom: 0; }
	#header .header-nav-main nav > ul li a { display: block; padding: 7px 8px; margin: 1px 0; color: var(--dark); font-size: 13px; line-height: 20px; text-align: left; border-radius: 0; }
	#header .header-nav-main nav > ul li.has-sub > a { padding-right: 48px; }
	#header .header-nav-main nav > ul > li > a { font-weight: 700; }
	#header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a.active { background: var(--primary); color: var(--primary-inverse) !important; }
	#header .header-nav-main nav > ul > li > a.active + .kumo-sub-toggle { color: var(--primary-inverse); }
	html body #header .header-nav-main nav > ul > li.dropdown ul.dropdown-menu, html body #header .header-nav-main nav > ul li ul.dropdown-menu { margin: 0; padding: 0 0 0 14px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
	#header .header-nav-main .dropdown-menu { position: static; display: none; float: none; margin: 0; padding: 0 0 0 14px; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: 13px; }
	#header .header-nav-main li.is-open > .dropdown-menu { display: block; }
	#header .header-nav-main .dropdown-menu li a { font-weight: 400; }
	#header .header-nav-main li.dropdown-mega .dropdown-mega-content { padding: 0 0 8px; }
	#header .header-nav-main li.dropdown-mega .row { display: block; margin: 0; }
	#header .header-nav-main li.dropdown-mega .row > * { width: auto; padding: 0; }
	#header .dropdown-mega-sub-title { display: block; padding: 8px 8px 0; font-weight: 700; color: var(--dark); }
	#header .dropdown-mega-sub-nav { margin: 0; padding: 0 0 0 8px; list-style: none; }
	#header .kumo-sub-toggle { position: absolute; top: 2px; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--dark); border-radius: var(--border-radius); }
	#header .kumo-sub-toggle:after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
	#header li.is-open > .kumo-sub-toggle:after { transform: rotate(-135deg); }
}
/* Without JavaScript the phone menu is simply shown */
html:not(.js) #header .header-nav-main nav { display: block !important; position: static; }

/* Sticky header (kumo.js): on wide screens the header is fixed from the top of the page
   (.sticky-header-active, #header keeps its height so nothing jumps); past the start
   offset .sticky-header-scrolled shrinks it, and the reveal effect hides it while scrolling down. */
html.sticky-header-active #header .header-body { position: fixed; top: 0; border-bottom-color: var(--kumo-line); box-shadow: 0 0 3px rgba(0, 0, 0, .08); }
html.sticky-header-scrolled #header.header-effect-shrink .header-container { min-height: 70px; }
html.sticky-header-scrolled #header.header-effect-shrink .header-logo { margin: .5rem 0; }
html.sticky-header-reveal #header .header-body { transform: translate3d(0, -100%, 0); }
html.sticky-header-reveal.sticky-header-show #header .header-body { transform: none; }
@media (prefers-reduced-motion: reduce) { #header .header-body, #header .header-container, #header .header-logo img { transition: none; } }

html.kumo-measuring #header, html.kumo-measuring #header * { transition: none !important; }
/* Transparent header: over the first section until the page scrolls */
html.cms-header-transparent #header .header-body { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-top: 0; }
html.cms-header-transparent.sticky-header-active #header .header-body { position: fixed; }
html.cms-header-transparent.sticky-header-scrolled #header .header-body { background: var(--light); }
#header.header-transparent .header-body { position: absolute; background: transparent; border-top: 0; }
html:not(.sticky-header-scrolled) #header.header-transparent .header-body { background-color: transparent !important; }
html.sticky-header-active #header.header-transparent .header-body { position: fixed; }
html.sticky-header-scrolled #header.header-transparent .header-body { background: var(--light); }

/* Nav bar header: the menu sits on a full-width bar under the logo row */
#header .header-nav-bar { background: var(--dark); }
#header .header-nav-bar .header-nav-main nav > ul > li > a { color: var(--light); }
#header .header-nav-bar .header-container { min-height: 56px; }
@media (min-width: 992px) { #header .header-nav-bar .header-nav-main nav > ul > li > a { min-height: 56px; } }

/* Boxed layout */
html.boxed body { background-color: var(--grey-200); }
html.boxed .body { max-width: 1200px; margin: 25px auto; border-radius: 5px; box-shadow: 0 0 20px rgba(0, 0, 0, .06); overflow: hidden; }
html.boxed.sticky-header-active #header .header-body { max-width: 1200px; left: 0; right: 0; margin: 0 auto; }

/* ----------------------------------------------------------- page header */
.page-header { position: relative; margin: 0 0 35px; padding: 30px 0; background-color: var(--dark); text-align: left; }
.page-header h1 { position: relative; top: 1px; display: inline-block; margin: 0; padding: 0; color: var(--light); font-size: 30px; font-weight: 400; line-height: 1; }
.page-header .sub-title { display: block; margin: 0; color: var(--light); font-size: 1.2em; font-weight: 300; opacity: .8; }
.page-header-modern h1 { font-size: 28px; }
.page-header.page-header-modern.page-header-sm { padding: 30px 0; }
.page-header.page-header-modern.page-header-md { padding: 50px 0; }
.page-header.page-header-modern.page-header-lg { padding: 70px 0; }
.page-header-light { background: var(--grey-100); }
.page-header-light h1 { color: var(--dark); }
.page-header-classic { padding: 30px 0; border-bottom: 1px solid var(--kumo-line); background: var(--grey-100); }
.page-header-classic h1 { color: var(--dark); }

/* ------------------------------------------------------------ breadcrumb */
.breadcrumb { position: relative; z-index: 1; margin: 0; padding: 0; background: none; }
.breadcrumb > li { display: inline-block; font-size: .8em; text-transform: uppercase; }
.breadcrumb > li + li:before { content: "\f105"; padding: 0 7px 0 5px; color: inherit; opacity: .5; font-family: "Font Awesome 7 Free"; font-weight: 900; }
.breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: none; }
.breadcrumb-light, .breadcrumb-light a { color: var(--light); }
.breadcrumb-light .active { opacity: .7; }

/* ---------------------------------------------------------------- footer */
#footer { position: relative; clear: both; margin-top: 50px; padding: 0; background: var(--dark); border-top: 4px solid var(--dark); color: var(--default); font-size: .9em; }
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 { color: var(--light); }
#footer a:not(.btn):not(.no-footer-css) { color: var(--default); transition: color .1s ease-in-out; }
#footer a:not(.btn):not(.no-footer-css):hover { color: var(--light); }
#footer .container { padding-top: 0; }
#footer .footer-copyright { margin-top: 40px; padding: 25px 0; background: rgba(0, 0, 0, .15); border-top: 1px solid rgba(255, 255, 255, .06); }
#footer .footer-copyright p { margin: 0; font-size: .9em; }
#footer .list-icons li { position: relative; padding-left: 26px; margin-bottom: 8px; }
#footer .list-icons li > i:first-child { position: absolute; left: 0; top: 5px; }
.list { margin: 0 0 20px; padding: 0; list-style: none; }
.list li { margin-bottom: 13px; }
.list-icons-lg li { padding-left: 32px; }
.list-icons-sm li { font-size: .95em; }

/* Social icons */
.social-icons { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.social-icons li { margin: 0; }
.social-icons li a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--light); color: var(--dark); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .1); text-decoration: none; transition: background .2s ease, color .2s ease; }
.social-icons li a:hover { background: var(--primary); color: var(--primary-inverse); text-decoration: none; }
.social-icons.social-icons-clean li a { background: transparent; box-shadow: none; color: inherit; }

/* Scroll to top (kumo.js shows it after a screen of scrolling) */
.scroll-to-top { position: fixed; right: 10px; bottom: -60px; z-index: 1040; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: #404040; color: #fff; border-radius: 7px 7px 0 0; opacity: 0; transition: bottom .3s ease, opacity .3s ease; }
.scroll-to-top.visible { bottom: 0; opacity: .75; }
.scroll-to-top:hover { opacity: 1; color: #fff; text-decoration: none; }
@media (max-width: 991.98px) { .scroll-to-top.hidden-mobile { display: none !important; } }

/* --------------------------------------------------------------- sections */
section.section { margin: 30px 0; padding: 50px 0; background: var(--grey-100); border-top: 5px solid var(--grey-200); }
section.section.section-no-border, section.section.border-0 { border-top: 0; }
section.section > .container { position: relative; }
/* Section heights from the builder (none / small … extra large): padding steps */
section.section.section-height-1 { padding: 12px 0; } section.section.section-height-2 { padding: 37px 0; } section.section.section-height-3 { padding: 74px 0; } section.section.section-height-4 { padding: 111px 0; } section.section.section-height-5 { padding: 148px 0; }
.section-primary { background-color: var(--primary) !important; border-color: var(--primary-100) !important; }
.section-text-light h1, .section-text-light h2, .section-text-light h3, .section-text-light h4, .section-text-light h5, .section-text-light h6 { color: var(--light); }
section.section.section-text-light p, .section-text-light p { color: #E6E5E5; }

/* Background picture options of the section block: a tinted overlay (opacity 0-10) and a fixed (parallax) picture */
.overlay { position: relative; }
.overlay:before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--dark); opacity: 0; pointer-events: none; }
.overlay > * { position: relative; z-index: 1; }
.overlay.overlay-show:before { opacity: .8; }
.overlay.overlay-op-0.overlay-show:before { opacity: 0; }
.overlay.overlay-op-1.overlay-show:before { opacity: 0.1; }
.overlay.overlay-op-2.overlay-show:before { opacity: 0.2; }
.overlay.overlay-op-3.overlay-show:before { opacity: 0.3; }
.overlay.overlay-op-4.overlay-show:before { opacity: 0.4; }
.overlay.overlay-op-5.overlay-show:before { opacity: 0.5; }
.overlay.overlay-op-6.overlay-show:before { opacity: 0.6; }
.overlay.overlay-op-7.overlay-show:before { opacity: 0.7; }
.overlay.overlay-op-8.overlay-show:before { opacity: 0.8; }
.overlay.overlay-op-9.overlay-show:before { opacity: 0.9; }
.overlay.overlay-op-10.overlay-show:before { opacity: 1; }
.overlay-color-primary:before { background-color: var(--primary); }
.overlay-color-secondary:before { background-color: var(--secondary); }
.overlay-color-tertiary:before { background-color: var(--tertiary); }
.overlay-color-quaternary:before { background-color: var(--quaternary); }
.overlay-color-dark:before { background-color: var(--dark); }
.overlay-color-light:before { background-color: var(--light); }
.section.section-parallax { background-position: 50% 50%; background-size: cover; background-attachment: fixed; }
@media (max-width: 991.98px), (hover: none) { .section.section-parallax { background-attachment: scroll; } }

/* Tabs block */
.tabs { margin-bottom: 20px; }
.tabs .tab-content { padding: 15px; border: 1px solid var(--bs-border-color); border-top: 0; border-radius: 0 0 4px 4px; background: #fff; }
.tabs-vertical { display: flex; align-items: stretch; }
.tabs-vertical .nav-tabs { flex: 0 0 25%; flex-direction: column; border-bottom: 0; border-right: 1px solid var(--bs-border-color); }
.tabs-vertical .nav-tabs .nav-link { margin: 0 -1px 0 0; border-radius: 4px 0 0 4px; }
.tabs-vertical .nav-tabs .nav-link.active { border-color: var(--bs-border-color) var(--bs-body-bg) var(--bs-border-color) var(--bs-border-color); }
.tabs-vertical .tab-content { flex: 1 1 auto; border-top: 1px solid var(--bs-border-color); border-left: 0; border-radius: 0 4px 4px 0; }
@media (max-width: 575.98px) { .tabs-vertical { flex-direction: column; } .tabs-vertical .nav-tabs { border-right: 0; } .tabs-vertical .tab-content { border-left: 1px solid var(--bs-border-color); border-radius: 0 0 4px 4px; } }

/* --------------------------------------------------------------- elements */
.card { position: relative; border: 1px solid rgba(0, 0, 0, .06); }
.card-header { border-bottom: 1px solid rgba(0, 0, 0, .06); }
.accordion .card { margin-top: 5px; border: 1px solid rgba(0, 0, 0, .125); border-radius: .25rem; }
.accordion .card:first-child { margin-top: 0; }
.accordion .card-header { margin: -1px; padding: 0; border-bottom: 0; border-radius: .25rem; }
.accordion .card-title { margin: 0; font-size: 16px; }
.accordion .card-header a { display: block; padding: 10px 20px; color: var(--primary); cursor: pointer; text-decoration: none; }
.accordion.accordion-modern .card:first-of-type, .accordion.accordion-modern .card:not(:first-of-type):not(:last-of-type), .accordion.accordion-modern .card:last-of-type { border: 4px solid var(--grey-100); border-radius: .25rem; }
.accordion.accordion-modern .card .card-header { background-color: var(--grey-100); border-radius: .25rem; }
.img-thumbnail { position: relative; max-width: 100%; height: auto; padding: 4px; border: 1px solid var(--kumo-line); border-radius: var(--border-radius); }
.img-thumbnail img { border-radius: var(--border-radius); }
.img-thumbnail.img-thumbnail-no-borders { padding: 0; border: 0; }
.nav > li > a, .nav-link { color: var(--primary); }
.nav-pills .nav-link.active, .nav-pills > li.active > a { background-color: var(--primary); color: var(--primary-inverse); }
ul.nav-list { margin: 0; padding: 0; list-style: none; }
ul.nav-list li { position: relative; margin: 0; padding: 0; display: block; }
ul.nav-list li a { display: block; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--kumo-line); color: var(--default); line-height: 20px; text-decoration: none; }
ul.nav-list li a:before { content: ""; position: absolute; left: 4px; top: 50%; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-50%) rotate(-45deg); opacity: .6; }
ul.nav-list li:last-child a { border-bottom: 0; }
ul.nav-list li a:hover { color: var(--primary); }
.pagination { position: relative; z-index: 1; --bs-pagination-color: var(--primary); --bs-pagination-active-bg: var(--primary); --bs-pagination-active-border-color: var(--primary); --bs-pagination-active-color: var(--primary-inverse); --bs-pagination-hover-color: var(--primary-100); }
.pagination .page-link { box-shadow: none !important; }
.badge-sm { padding: .3em .55em; font-size: .7em; }
.http-error { padding: 50px 0; }
.http-error h2 { font-size: 140px; font-weight: 700; line-height: 140px; }
.http-error h4 { color: var(--default); }
.http-error p { font-size: 1.4em; line-height: 36px; }
@media (max-width: 575.98px) { .http-error { padding: 0; } .http-error h2 { font-size: 100px; line-height: 100px; } }
.feature-box { display: flex; }
.feature-box .feature-box-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 3em; height: 3em; margin-right: 1rem; background: var(--primary); color: var(--primary-inverse); border-radius: 50%; }
.feature-box .feature-box-info { flex: 1 1 auto; }
.featured-box { margin: 20px auto; background: var(--light); border-bottom: 1px solid #DFDFDF; border-left: 1px solid #ECECEC; border-right: 1px solid #ECECEC; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, .05); text-align: center; }
.featured-box .box-content { padding: 30px; border-top: 4px solid var(--primary); border-radius: 8px; }
.featured-box-primary .box-content { border-top-color: var(--primary); }
.dropdown-menu-arrow-centered { left: 50% !important; transform: translateX(-50%); }
.min-width-0 { min-width: 0 !important; }
.avatar { border-radius: 50%; }

/* ------------------------------------------------------------- utilities
   Class names saved in blocks and content since 1.x; the CSS is Kumo's own. */
.text-color-primary, .text-primary { color: var(--primary) !important; }
.text-color-secondary, .text-secondary { color: var(--secondary) !important; }
.text-color-tertiary, .text-tertiary { color: var(--tertiary) !important; }
.text-color-quaternary, .text-quaternary { color: var(--quaternary) !important; }
.text-color-dark, .text-dark { color: var(--dark) !important; }
.text-color-light, .text-light { color: var(--light) !important; }
.text-color-grey, .text-grey { color: var(--grey) !important; }
.text-color-hover-primary:hover { color: var(--primary) !important; }
.text-color-hover-light:hover { color: var(--light) !important; }
.bg-color-primary, .bg-primary { background-color: var(--primary) !important; }
.bg-color-secondary, .bg-secondary { background-color: var(--secondary) !important; }
.bg-color-tertiary, .bg-tertiary { background-color: var(--tertiary) !important; }
.bg-color-quaternary, .bg-quaternary { background-color: var(--quaternary) !important; }
.bg-color-dark, .bg-dark { background-color: var(--dark) !important; }
.bg-color-light, .bg-light { background-color: var(--light) !important; }
.bg-color-grey, .bg-grey { background-color: var(--grey-100) !important; }
.bg-color-transparent, .bg-transparent, .background-transparent { background: transparent !important; }
.text-1 { font-size: .8em !important; } .text-2 { font-size: .9em !important; } .text-3 { font-size: 1em !important; } .text-4 { font-size: 1.2em !important; } .text-5 { font-size: 1.5em !important; } .text-6 { font-size: 1.8em !important; } .text-7 { font-size: 2em !important; } .text-8 { font-size: 2.3em !important; } .text-9 { font-size: 2.6em !important; } .text-10 { font-size: 3em !important; } .text-11 { font-size: 3.5em !important; } .text-12 { font-size: 4em !important; } .text-13 { font-size: 4.6em !important; }
.font-weight-light { font-weight: 300 !important; }
.font-weight-normal, .font-weight-regular { font-weight: 400 !important; }
.font-weight-medium { font-weight: 500 !important; }
.font-weight-semibold, .font-weight-semi-bold { font-weight: 700 !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-extrabold, .font-weight-extra-bold { font-weight: 800 !important; }
.font-weight-black { font-weight: 900 !important; }
.line-height-1 { line-height: 1 !important; } .line-height-2 { line-height: 1.2 !important; } .line-height-3 { line-height: 1.3 !important; } .line-height-4 { line-height: 1.4 !important; } .line-height-5 { line-height: 1.5 !important; } .line-height-6 { line-height: 1.6 !important; } .line-height-7 { line-height: 1.7 !important; } .line-height-8 { line-height: 1.8 !important; } .line-height-9 { line-height: 1.9 !important; }
.opacity-1 { opacity: .1 !important; } .opacity-2 { opacity: .2 !important; } .opacity-3 { opacity: .3 !important; } .opacity-4 { opacity: .4 !important; } .opacity-5 { opacity: .5 !important; } .opacity-6 { opacity: .6 !important; } .opacity-7 { opacity: .7 !important; } .opacity-8 { opacity: .8 !important; } .opacity-9 { opacity: .9 !important; }
.p-static { position: static !important; }
.p-relative { position: relative !important; }
.z-index-0 { z-index: 0 !important; } .z-index-1 { z-index: 1 !important; } .z-index-2 { z-index: 2 !important; } .z-index-3 { z-index: 3 !important; }
.box-shadow-none { box-shadow: none !important; }
.border-color-primary { border-color: var(--primary) !important; } .border-color-secondary { border-color: var(--secondary) !important; } .border-color-dark { border-color: var(--dark) !important; } .border-color-light { border-color: var(--light) !important; } .border-color-grey { border-color: var(--grey-200) !important; }
.rounded { border-radius: 5px !important; }
.box-shadow-1 { box-shadow: 0 30px 90px rgba(0, 0, 0, .08) !important; }
.box-shadow-2 { box-shadow: 0 15px 30px -15px rgba(0, 0, 0, .45) !important; }
.hide-text { display: block; overflow: hidden; text-indent: -9999px; }
.custom-page-header { position: relative; }

/* ---------------------------------------------------------------- blog */
.blog-posts:not(.blog-posts-no-margins) article { margin-bottom: 50px; padding-bottom: 20px; border-bottom: 1px solid var(--kumo-line); }
article.post h2 a { color: var(--dark); text-decoration: none; }
article.post h2 a:hover { color: var(--primary); }
article.post .post-meta { margin: 0 0 7px; font-size: .9em; }
article.post .post-meta > span { display: inline-block; padding-right: 8px; }
article.post .post-meta i { margin-right: 3px; }
article.post .post-date { float: left; margin-right: 10px; text-align: center; }
article.post .post-date .day { display: block; padding: 10px; background: #F4F4F4; color: var(--primary); font-size: 18px; font-weight: 900; border-radius: 2px 2px 0 0; }
article.post .post-date .month { display: block; padding: 1px 10px; background: var(--primary); color: var(--primary-inverse); font-size: .8em; line-height: 1.8; text-transform: uppercase; border-radius: 0 0 2px 2px; }
article.post-large { margin-left: 60px; }
article.post-large .post-image, article.post-large .post-date { margin-left: -60px; }
article.post-large .post-image { margin-bottom: 25px; }
article.post-large h2 { margin-bottom: 5px; }
@media (max-width: 575.98px) { article.post-large { margin-left: 0; } article.post-large .post-image, article.post-large .post-date { margin-left: 0; } }
article.blog-single-post .post-meta { margin-bottom: 20px; }
.single-post article { margin-bottom: 40px; }
.post-author { margin: 0; }
.post-author .img-thumbnail { float: left; margin-right: 20px; }
.post-author p { margin: 0; padding: 0; font-size: .9em; line-height: 22px; }
.post-author p .name { font-weight: 700; }
ul.simple-post-list { margin: 0; padding: 0; list-style: none; }
ul.simple-post-list li { display: flow-root; margin: 0; padding: 15px 0; border-bottom: 1px dotted #E2E2E2; }
ul.simple-post-list li:last-child { border-bottom: 0; }
ul.simple-post-list .post-image { float: left; margin-right: 12px; }
ul.simple-post-list .post-info { line-height: 20px; }
ul.simple-post-list .post-meta { font-size: .8em; color: var(--grey); }

/* Comments */
.comments { margin: 0; padding: 0; list-style: none; }
.comments li { position: relative; padding: 0 0 0 82px; }
.comments li .img-thumbnail { position: absolute; left: 0; top: 10px; }
.comment-block { position: relative; margin-bottom: 20px; padding: 20px; background: var(--grey-100); border-radius: 5px; }
.comment-block .comment-by { display: block; margin-bottom: 8px; font-size: 1em; }
.comment-block .comment-by strong { color: var(--dark); }
.comment-block .date { color: var(--grey); font-size: .9em; }
.comments ul.comments { margin-left: 10px; }
.comment .reply { float: right; }
.comment-arrow { position: absolute; left: -15px; top: 28px; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid var(--grey-100); }
.post-leave-comment { margin-top: 40px; }

/* ----------------------------------------------------------- slider block
   kumo.js runs the slides; without JavaScript the first slide shows. */
.kumo-slider { position: relative; overflow: hidden; touch-action: pan-y; }
.kumo-slider-track { position: relative; display: grid; }
.kumo-slider-track > .kumo-slide { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }
.kumo-slider-track > .kumo-slide.is-active { visibility: visible; opacity: 1; transition-delay: 0s; z-index: 1; }
.kumo-slider[data-transition="slide"] .kumo-slider-track > .kumo-slide { transform: translate3d(8%, 0, 0); }
.kumo-slider[data-transition="slide"] .kumo-slider-track > .kumo-slide.is-active { transform: none; }
html:not(.js) .kumo-slider-track > .kumo-slide:first-child { visibility: visible; opacity: 1; }
.kumo-slider-arrow { position: absolute; top: 50%; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; transform: translate3d(0, -50%, 0); opacity: 0; transition: opacity .2s ease, background .2s ease; cursor: pointer; }
.kumo-slider-arrow:hover { background: rgba(0, 0, 0, .7); }
.kumo-slider-prev { left: 20px; }
.kumo-slider-next { right: 20px; }
.kumo-slider-arrow:after { content: ""; width: 10px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; }
.kumo-slider-prev:after { transform: translateX(2px) rotate(135deg); }
.kumo-slider-next:after { transform: translateX(-2px) rotate(-45deg); }
.kumo-slider:hover .kumo-slider-arrow, .kumo-slider:focus-within .kumo-slider-arrow { opacity: 1; }
@media (hover: none) { .kumo-slider-arrow { opacity: .85; } }
.kumo-slider-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.kumo-slider-dot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.kumo-slider-dot:before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); transition: background .2s ease, transform .2s ease; }
.kumo-slider-dot[aria-current="true"]:before { background: #fff; transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .kumo-slider-track > .kumo-slide { transition: none; transform: none !important; } }
/* 3.5.5 (HANDOFF 20.2 ข้อ 5): the whole width of the screen even inside a column (the page never scrolls sideways for it) */
.kumo-slider.kb-wide { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); border-radius: 0; }
main:has(.kumo-slider.kb-wide), #main:has(.kumo-slider.kb-wide) { overflow-x: clip; }
/* a shape for the slides (auto = the heights of the slider editor); phones take their own once a shape is chosen */
.kumo-slider[data-ratio="21x9"] .kumo-slider-track > .kumo-slide { height: auto; aspect-ratio: 21 / 9; }
.kumo-slider[data-ratio="16x9"] .kumo-slider-track > .kumo-slide { height: auto; aspect-ratio: 16 / 9; }
.kumo-slider[data-ratio="3x1"] .kumo-slider-track > .kumo-slide { height: auto; aspect-ratio: 3 / 1; }
.kumo-slider[data-ratio="screen"] .kumo-slider-track > .kumo-slide { height: min(100svh, 760px); aspect-ratio: auto; }
@media (max-width: 767.98px) {
  .kumo-slider:not([data-ratio="auto"])[data-ratio-m="4x5"] .kumo-slider-track > .kumo-slide { height: auto; aspect-ratio: 4 / 5; }
  .kumo-slider:not([data-ratio="auto"])[data-ratio-m="1x1"] .kumo-slider-track > .kumo-slide { height: auto; aspect-ratio: 1 / 1; }
  .kumo-slider:not([data-ratio="auto"])[data-ratio-m="3x4"] .kumo-slider-track > .kumo-slide { height: auto; aspect-ratio: 3 / 4; }
  .kumo-slider:not([data-ratio="auto"])[data-ratio-m="16x9"] .kumo-slider-track > .kumo-slide { height: auto; aspect-ratio: 16 / 9; }
}
/* pause / play while it plays by itself (WCAG 2.2.2): two bars, a triangle once paused */
.kumo-slider-pp { position: absolute; left: 14px; bottom: 12px; z-index: 4; display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #FFFFFF; cursor: pointer; }
.kumo-slider-pp:hover { background: rgba(0, 0, 0, .75); }
.kumo-slider-pp:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0, 0, 0, .6); }
.kumo-slider-pp::before { content: ""; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.kumo-slider-pp[aria-pressed="true"]::before { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.kumo-slider-pp[hidden] { display: none; }
/* a progress bar in the dots: the current one fills over the time of the slide; held while it waits */
.kumo-slider.has-progress .kumo-slider-dot { position: relative; width: 32px; }
.kumo-slider.has-progress .kumo-slider-dot::before { width: 24px; height: 4px; border-radius: 2px; transform: none; }
.kumo-slider.has-progress .kumo-slider-dot[aria-current="true"]::before { background: rgba(255, 255, 255, .55); transform: none; }
.kumo-slider-prog { position: absolute; left: 4px; top: 12px; width: 0; height: 4px; border-radius: 2px; background: #FFFFFF; pointer-events: none; }
.kumo-slider-dot[aria-current="true"] .kumo-slider-prog { animation: kumo-slider-prog var(--k-interval, 6s) linear forwards; }
.kumo-slider.is-held .kumo-slider-prog, .kumo-slider.is-paused .kumo-slider-prog { animation-play-state: paused; }
@keyframes kumo-slider-prog { from { width: 0; } to { width: 24px; } }
@media (prefers-reduced-motion: reduce) { .kumo-slider-dot[aria-current="true"] .kumo-slider-prog { animation: none; width: 24px; } }

/* Layer and heading entrance animations (names offered by the slide editor and the heading block) */
[data-appear-animation], [data-reveal] { opacity: 0; }
html:not(.js) [data-appear-animation], html:not(.js) [data-reveal] { opacity: 1; }
.appear-animation-visible, .is-revealed { opacity: 1; }
.kumo-anim { animation-duration: var(--kumo-anim-duration, .9s); animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
@keyframes kumo-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kumo-fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
@keyframes kumo-fadeInDown { from { opacity: 0; transform: translate3d(0, -40px, 0); } to { opacity: 1; transform: none; } }
@keyframes kumo-fadeInLeft { from { opacity: 0; transform: translate3d(-40px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes kumo-fadeInRight { from { opacity: 0; transform: translate3d(40px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes kumo-zoomIn { from { opacity: 0; transform: scale3d(.85, .85, .85); } to { opacity: 1; transform: none; } }
@keyframes kumo-zoomOut { from { opacity: 0; transform: scale3d(1.15, 1.15, 1.15); } to { opacity: 1; transform: none; } }
@keyframes kumo-slideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: none; } }
@keyframes kumo-slideInDown { from { transform: translate3d(0, -100%, 0); visibility: visible; } to { transform: none; } }
@keyframes kumo-slideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: none; } }
@keyframes kumo-slideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: none; } }
@keyframes kumo-bounceIn { 0% { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; transform: scale3d(1.05, 1.05, 1.05); } 75% { transform: scale3d(.95, .95, .95); } to { opacity: 1; transform: none; } }
@keyframes kumo-flipInX { from { opacity: 0; transform: perspective(400px) rotate3d(1, 0, 0, 90deg); } 60% { opacity: 1; transform: perspective(400px) rotate3d(1, 0, 0, -10deg); } to { opacity: 1; transform: perspective(400px); } }
@media (prefers-reduced-motion: reduce) { .kumo-anim { animation: none !important; } [data-appear-animation], [data-reveal] { opacity: 1; } }

/* 3.3 slider (HANDOFF 9.4 / 9.6): six transitions, 14 entrance + 14 exit animations per layer, video layers.
   Only transform / opacity / clip-path (blur: filter) are animated; kumo.js adds will-change while a layer plays. */
.kumo-slider[data-transition="kenburns"] .kumo-slider-track > .kumo-slide.is-active .cms-slide-bg { animation: kumo-kenburns var(--k-interval, 6s) linear both; }
.kumo-slider.is-paused .cms-slide-bg, .kumo-slider.is-paused .cms-layer-inner { animation-play-state: paused; }
@keyframes kumo-kenburns { from { scale: 1; } to { scale: 1.12; } }
.kumo-slider[data-transition="flip"] .kumo-slider-track > .kumo-slide { transform: perspective(1400px) rotateY(80deg); transform-origin: 50% 50%; backface-visibility: hidden; }
.kumo-slider[data-transition="flip"] .kumo-slider-track > .kumo-slide.is-leaving { transform: perspective(1400px) rotateY(-80deg); }
.kumo-slider[data-transition="flip"] .kumo-slider-track > .kumo-slide.is-active { transform: none; }
/* curtain and stack: the new slide covers the old one, which stays in place underneath */
.kumo-slider[data-transition="curtain"] .kumo-slider-track > .kumo-slide { opacity: 1; clip-path: inset(0 0 0 100%); transition: clip-path .9s cubic-bezier(.7, 0, .3, 1), visibility 0s linear .9s; }
.kumo-slider[data-transition="stack"] .kumo-slider-track > .kumo-slide { opacity: 1; transform: translate3d(0, 100%, 0); transition: transform .8s cubic-bezier(.7, 0, .3, 1), visibility 0s linear .8s; }
.kumo-slider[data-transition="curtain"] .kumo-slider-track > .kumo-slide.is-leaving,
.kumo-slider[data-transition="stack"] .kumo-slider-track > .kumo-slide.is-leaving { clip-path: none; transform: none; transition-property: visibility; }
.kumo-slider[data-transition="curtain"] .kumo-slider-track > .kumo-slide.is-active { clip-path: inset(0); transition-delay: 0s; }
.kumo-slider[data-transition="stack"] .kumo-slider-track > .kumo-slide.is-active { transform: none; transition-delay: 0s; }
html:not(.js) .kumo-slider .kumo-slider-track > .kumo-slide:first-child { clip-path: none; transform: none; }

/* a layer with an entrance waits hidden for it */
.kumo-slider.is-ready .cms-layer-inner[data-k-in]:not([data-k-in="none"]) { opacity: 0; }
.cms-layer-inner.is-k-in { animation-duration: var(--k-dur, .8s); animation-delay: var(--k-delay, 0s); animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
.cms-layer-inner.is-k-out { animation-duration: var(--k-out-dur, .6s); animation-delay: 0s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
.cms-layer-inner.is-k-in[data-k-in="typing"], .cms-layer-inner.is-k-out[data-k-out="typing"] { animation-timing-function: steps(var(--k-chars, 20), end); }
.cms-layer-inner.is-k-in[data-k-in="fade"] { animation-name: kumo-in-fade; }
.cms-layer-inner.is-k-in[data-k-in="up"] { animation-name: kumo-in-up; }
.cms-layer-inner.is-k-in[data-k-in="down"] { animation-name: kumo-in-down; }
.cms-layer-inner.is-k-in[data-k-in="left"] { animation-name: kumo-in-left; }
.cms-layer-inner.is-k-in[data-k-in="right"] { animation-name: kumo-in-right; }
.cms-layer-inner.is-k-in[data-k-in="zoom"] { animation-name: kumo-in-zoom; }
.cms-layer-inner.is-k-in[data-k-in="zoomout"] { animation-name: kumo-in-zoomout; }
.cms-layer-inner.is-k-in[data-k-in="flip"] { animation-name: kumo-in-flip; }
.cms-layer-inner.is-k-in[data-k-in="rotate"] { animation-name: kumo-in-rotate; }
.cms-layer-inner.is-k-in[data-k-in="bounce"] { animation-name: kumo-in-bounce; }
.cms-layer-inner.is-k-in[data-k-in="blur"] { animation-name: kumo-in-blur; }
.cms-layer-inner.is-k-in[data-k-in="reveal"] { animation-name: kumo-in-reveal; }
.cms-layer-inner.is-k-in[data-k-in="typing"] { animation-name: kumo-in-typing; }
.cms-layer-inner.is-k-in[data-k-in="pop"] { animation-name: kumo-in-pop; }
.cms-layer-inner.is-k-out[data-k-out="fade"] { animation-name: kumo-out-fade; }
.cms-layer-inner.is-k-out[data-k-out="up"] { animation-name: kumo-out-up; }
.cms-layer-inner.is-k-out[data-k-out="down"] { animation-name: kumo-out-down; }
.cms-layer-inner.is-k-out[data-k-out="left"] { animation-name: kumo-out-left; }
.cms-layer-inner.is-k-out[data-k-out="right"] { animation-name: kumo-out-right; }
.cms-layer-inner.is-k-out[data-k-out="zoom"] { animation-name: kumo-out-zoom; }
.cms-layer-inner.is-k-out[data-k-out="zoomout"] { animation-name: kumo-out-zoomout; }
.cms-layer-inner.is-k-out[data-k-out="flip"] { animation-name: kumo-out-flip; }
.cms-layer-inner.is-k-out[data-k-out="rotate"] { animation-name: kumo-out-rotate; }
.cms-layer-inner.is-k-out[data-k-out="bounce"] { animation-name: kumo-out-bounce; }
.cms-layer-inner.is-k-out[data-k-out="blur"] { animation-name: kumo-out-blur; }
.cms-layer-inner.is-k-out[data-k-out="reveal"] { animation-name: kumo-out-reveal; }
.cms-layer-inner.is-k-out[data-k-out="typing"] { animation-name: kumo-out-typing; }
.cms-layer-inner.is-k-out[data-k-out="pop"] { animation-name: kumo-out-pop; }
@keyframes kumo-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kumo-in-up { from { opacity: 0; transform: translate3d(0, 48px, 0); } to { opacity: 1; transform: none; } }
@keyframes kumo-in-down { from { opacity: 0; transform: translate3d(0, -48px, 0); } to { opacity: 1; transform: none; } }
@keyframes kumo-in-left { from { opacity: 0; transform: translate3d(-64px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes kumo-in-right { from { opacity: 0; transform: translate3d(64px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes kumo-in-zoom { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes kumo-in-zoomout { from { opacity: 0; transform: scale(1.4); } to { opacity: 1; transform: none; } }
@keyframes kumo-in-flip { from { opacity: 0; transform: perspective(600px) rotateX(90deg); } 60% { opacity: 1; transform: perspective(600px) rotateX(-10deg); } to { opacity: 1; transform: perspective(600px) rotateX(0); } }
@keyframes kumo-in-rotate { from { opacity: 0; transform: rotate(-20deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes kumo-in-bounce { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.08); } 72% { transform: scale(.94); } 88% { transform: scale(1.02); } to { opacity: 1; transform: none; } }
@keyframes kumo-in-blur { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }
@keyframes kumo-in-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kumo-in-typing { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kumo-in-pop { 0% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes kumo-out-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes kumo-out-up { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, 48px, 0); } }
@keyframes kumo-out-down { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, -48px, 0); } }
@keyframes kumo-out-left { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(-64px, 0, 0); } }
@keyframes kumo-out-right { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(64px, 0, 0); } }
@keyframes kumo-out-zoom { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.6); } }
@keyframes kumo-out-zoomout { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.4); } }
@keyframes kumo-out-flip { from { opacity: 1; transform: perspective(600px) rotateX(0); } to { opacity: 0; transform: perspective(600px) rotateX(-90deg); } }
@keyframes kumo-out-rotate { from { opacity: 1; transform: none; } to { opacity: 0; transform: rotate(20deg) scale(.8); } }
@keyframes kumo-out-bounce { 0% { opacity: 1; transform: none; } 30% { transform: scale(1.08); } to { opacity: 0; transform: scale(.3); } }
@keyframes kumo-out-blur { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(14px); } }
@keyframes kumo-out-reveal { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes kumo-out-typing { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 100% 0 0); } }
@keyframes kumo-out-pop { 0% { opacity: 1; transform: none; } 30% { opacity: 1; transform: scale(1.12); } to { opacity: 0; transform: scale(.5); } }

/* video layer: 16:9, the player is made when its slide shows */
.cms-layer-video .cms-layer-inner { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #000; }
.cms-layer-video-frame, .cms-layer-video-file, .cms-layer-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.cms-layer-video-file { object-fit: cover; }
/* staff only: a [slider id] that does not exist */
.cms-slider-missing { margin: 1rem 0; padding: 12px 16px; border: 2px dashed #b45309; border-radius: 8px; background: #fffbeb; color: #78350f; }

@media (prefers-reduced-motion: reduce) {
	.cms-layer-inner.is-k-in { animation-name: kumo-in-fade !important; animation-duration: .2s !important; animation-delay: 0s !important; animation-timing-function: ease !important; }
	.cms-layer-inner.is-k-out { animation-name: kumo-out-fade !important; animation-duration: .2s !important; animation-timing-function: ease !important; }
	.kumo-slider .kumo-slider-track > .kumo-slide { clip-path: none !important; }
	.kumo-slider .kumo-slider-track > .kumo-slide .cms-slide-bg { animation: none !important; }
}

/* ---------------------------------------------------------- lightbox
   One <dialog> for image and gallery blocks (kumo.js). */
.kumo-lightbox { touch-action: pan-y; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; background: rgba(10, 10, 12, .92); color: #fff; }
.kumo-lightbox::backdrop { background: rgba(10, 10, 12, .92); }
.kumo-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.kumo-lightbox-figure { margin: 0; max-width: calc(100vw - 120px); max-height: calc(100vh - 100px); text-align: center; }
.kumo-lightbox-figure img { display: block; max-width: 100%; max-height: calc(100vh - 140px); margin: 0 auto; object-fit: contain; }
.kumo-lightbox-figure figcaption { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.kumo-lightbox button { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 22px; cursor: pointer; }
.kumo-lightbox button:hover, .kumo-lightbox button:focus-visible { background: rgba(255, 255, 255, .25); }
.kumo-lightbox-close { top: 16px; right: 16px; }
.kumo-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.kumo-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
.kumo-lightbox-count { position: absolute; top: 26px; left: 24px; font-size: 13px; color: rgba(255, 255, 255, .75); }
@media (max-width: 575.98px) { .kumo-lightbox-figure { max-width: 100vw; } .kumo-lightbox-prev, .kumo-lightbox-next { top: auto; bottom: 16px; transform: none; } }

/* ---------- 3.5 column animations (HANDOFF 6; docs/design/3.5/css/motion.css). transform / opacity / clip-path only. ---------- */
html.js .kb-anim:not(.is-in) { opacity: 0; }
html.js .kb-a-wipe:not(.is-in) { opacity: 1; clip-path: inset(0 100% 0 0); }
html.js .kb-a-stagger:not(.is-in) { opacity: 1; }
html.js .kb-a-stagger:not(.is-in) > * { opacity: 0; }
:root { --kb-ease-out: cubic-bezier(.16, 1, .3, 1); --kb-ease-spring: cubic-bezier(.34, 1.4, .64, 1); }
.kb-anim.is-in { animation: var(--kb-name, kb-rise) var(--kb-dur, .7s) var(--kb-ease, var(--kb-ease-out)) var(--kb-delay, 0s) both; }
.kb-a-rise    { --kb-name: kb-rise; }
.kb-a-drop    { --kb-name: kb-drop; }
.kb-a-left    { --kb-name: kb-left; }
.kb-a-right   { --kb-name: kb-right; }
.kb-a-zoom    { --kb-name: kb-zoom; }
.kb-a-shrink  { --kb-name: kb-shrink; }
.kb-a-flip    { --kb-name: kb-flip; transform-origin: 50% 100%; }
.kb-a-wipe    { --kb-name: kb-wipe; --kb-ease: cubic-bezier(.65, 0, .35, 1); }
.kb-a-tilt    { --kb-name: kb-tilt; transform-origin: 0 100%; }
.kb-a-pop     { --kb-name: kb-pop; --kb-ease: var(--kb-ease-spring); }
/* "ทีละชิ้น": the column stays put, its direct children rise one after another (80 ms apart) */
.kb-a-stagger.is-in { animation: none; }
.kb-a-stagger.is-in > * { animation: kb-rise var(--kb-dur, .6s) var(--kb-ease-out) both; }
.kb-a-stagger.is-in > :nth-child(2) { animation-delay: calc(var(--kb-delay, 0s) + .08s); }
.kb-a-stagger.is-in > :nth-child(3) { animation-delay: calc(var(--kb-delay, 0s) + .16s); }
.kb-a-stagger.is-in > :nth-child(4) { animation-delay: calc(var(--kb-delay, 0s) + .24s); }
.kb-a-stagger.is-in > :nth-child(n+5) { animation-delay: calc(var(--kb-delay, 0s) + .32s); }
@keyframes kb-rise   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes kb-drop   { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes kb-left   { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes kb-right  { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes kb-zoom   { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes kb-shrink { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes kb-flip   { from { opacity: 0; transform: perspective(900px) rotateX(24deg) translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes kb-wipe   { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kb-tilt   { from { opacity: 0; transform: rotate(-4deg) translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes kb-pop    { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .kb-anim.is-in, .kb-a-stagger.is-in > * { animation: kb-fade .2s linear both !important; }
  @keyframes kb-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- 3.5 List block (HANDOFF 15.4; resources/views/blocks/list.blade.php). Colours: --kl-* from the page CSS ---------- */
.kb-list { --kl-gap: 10px; display: grid; gap: var(--kl-gap); margin: 0 0 1rem; padding: 0; list-style: none; color: var(--kl-tx, inherit); font-weight: var(--kl-w, 400); counter-reset: kl; }
.kb-list li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; overflow-wrap: anywhere; }
.kb-list .kl-ic { display: grid; place-items: center; flex: 0 0 auto; width: 1.6em; height: 1.6em; color: var(--kl-ic, var(--sk-primary, var(--bs-primary))); font-size: .95em; }
.kb-list .kl-tx { min-width: 0; padding-top: .1em; }
.kb-list .kl-tx a { color: var(--kl-lk, var(--sk-link, var(--bs-link-color))); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.kb-list.is-mk-dot li::before { content: "\2022"; flex: 0 0 auto; width: 1em; color: var(--kl-ic, var(--sk-primary, var(--bs-primary))); font-weight: 800; text-align: center; }
.kb-list.is-mk-number li { counter-increment: kl; }
.kb-list.is-mk-number li::before { content: counter(kl) "."; flex: 0 0 auto; min-width: 1.6em; color: var(--kl-ic, var(--sk-primary, var(--bs-primary))); font-weight: 800; }
.kb-list.is-ib-circle .kl-ic, .kb-list.is-ib-rounded .kl-ic { width: 2em; height: 2em; margin-top: -.2em; background: color-mix(in srgb, var(--kl-ic, var(--sk-primary, var(--bs-primary))) 14%, transparent); }
.kb-list.is-ib-circle .kl-ic { border-radius: 50%; } .kb-list.is-ib-rounded .kl-ic { border-radius: .55em; }
.kb-list.is-is-s .kl-ic { font-size: .78em; } .kb-list.is-is-l .kl-ic { font-size: 1.2em; }
.kb-list.is-ts-sm { font-size: .9375rem; } .kb-list.is-ts-md { font-size: 1.0625rem; } .kb-list.is-ts-lg { font-size: 1.25rem; } .kb-list.is-ts-xl { font-size: 1.5rem; }
.kb-list.is-dv-solid, .kb-list.is-dv-dashed, .kb-list.is-dv-dotted, .kb-list.is-dv-dots { gap: 0; }
.kb-list.is-dv-solid li + li, .kb-list.is-dv-dashed li + li, .kb-list.is-dv-dotted li + li { margin-top: var(--kl-gap); padding-top: var(--kl-gap); border-top: 1px solid var(--kl-dv, var(--sk-border, rgba(0, 0, 0, .15))); }
.kb-list.is-dv-dashed li + li { border-top-style: dashed; border-top-width: 1.5px; }
.kb-list.is-dv-dotted li + li { border-top-style: dotted; border-top-width: 3px; }
.kb-list.is-dv-dots li + li { margin-top: var(--kl-gap); padding-top: calc(var(--kl-gap) + 4px); background: radial-gradient(circle, var(--kl-dv, var(--sk-border, rgba(0, 0, 0, .25))) 1.6px, transparent 2.2px) 0 0 / 12px 5px repeat-x; }
.kb-list.is-dv-space { gap: calc(var(--kl-gap) * 2); }
.kb-list.is-ly-two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.kb-list.is-ly-two li:nth-child(2) { margin-top: 0; padding-top: 0; border-top: 0; background: none; }
.kb-list.is-ly-inline { display: flex; flex-wrap: wrap; gap: 8px var(--kl-gap); }
.kb-list.is-ly-inline li + li { margin-top: 0; padding-top: 0; border-top: 0; background: none; padding-left: var(--kl-gap); border-left: 1px solid var(--kl-dv, var(--sk-border, rgba(0, 0, 0, .15))); }
.kb-list.is-ly-inline.is-dv-none li + li, .kb-list.is-ly-inline.is-dv-space li + li { border-left: 0; padding-left: 0; }
.kb-list.is-ly-inline.is-dv-dashed li + li { border-left-style: dashed; } .kb-list.is-ly-inline.is-dv-dotted li + li { border-left-style: dotted; border-left-width: 3px; }
@media (max-width: 767.98px) { .kb-list.is-ly-two { grid-template-columns: minmax(0, 1fr); } .kb-list.is-ly-two li:nth-child(2) { margin-top: var(--kl-gap); } }
.section.sk-bg-clear { background-color: transparent; } /* 3.5: a section with a background from the style cards (they win over this) */

/* ---------- 3.5 pop-up banner (HANDOFF 16.5–16.6; partials/popup.blade.php, kumo-popup.js) ---------- */
html.kp-lock { overflow: hidden; }
.kp { position: fixed; inset: 0; z-index: 1090; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.kp[hidden] { display: none; }
.kp > * { pointer-events: auto; }
.kp-dim { position: absolute; inset: 0; background: color-mix(in srgb, var(--kp-dim, #0B0E1F) 55%, transparent); opacity: 0; transition: opacity 200ms ease; }
.kp.is-open .kp-dim { opacity: 1; }
.kp-box { position: relative; width: min(600px, 92vw, 80vh); aspect-ratio: 1; overflow: hidden; border-radius: 22px; background: #0B1F24; color: #FFFFFF; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(18px) scale(.97); transition: opacity 220ms ease, transform 320ms cubic-bezier(.16, 1, .3, 1); }
.kp.is-open .kp-box { opacity: 1; transform: none; }
.kp-box.is-pt { width: min(480px, 92vw, 60vh); aspect-ratio: 3 / 4; }
.kp-box.is-ls { width: min(800px, 92vw); aspect-ratio: 16 / 10; }
.kp-box.is-cn { width: min(360px, 92vw); aspect-ratio: 36 / 42; }
.kp[data-kp-pos="br"] { place-items: end end; } .kp[data-kp-pos="bl"] { place-items: end start; }
.kp[data-kp-pos="bar"] { place-items: end stretch; } .kp[data-kp-pos="bar"] .kp-box { width: 100%; max-width: 960px; aspect-ratio: auto; height: min(180px, 40vh); justify-self: center; }
.kp-pages, .kp-pages > .kp-slider, .kp-pages .cms-slider { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.kp-pages .cms-slider .cms-slides, .kp-pages .cms-slider .cms-slide { height: 100%; }
.kp-x { position: absolute; top: 12px; right: 12px; z-index: 5; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #FFFFFF; font-size: 18px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); cursor: pointer; }
.kp-x:hover { background: rgba(0, 0, 0, .75); }
.kp-x--light { background: #FFFFFF; color: #16191F; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); } .kp-x--light:hover { background: #F1F3F7; }
.kp-x--plain { background: transparent; box-shadow: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); } .kp-x--plain:hover { background: rgba(0, 0, 0, .25); }
.kp-x:focus-visible, .kp-never:focus-visible { outline: 3px solid #FFD84D; outline-offset: 2px; }
.kp-never { position: absolute; left: 50%; bottom: 8px; z-index: 5; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #FFFFFF; font-size: .8125rem; text-decoration: underline; transform: translateX(-50%); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .kp-box, .kp-dim { transition: none; transform: none; } }

/* ---------- 3.5 image block: shape, fill, colour over the picture (HANDOFF 15.3) ---------- */
.cms-image[class*="kb-img-r-"] img { display: block; width: 100%; height: auto; object-fit: cover; }
.cms-image.kb-img-r-16x10 img { aspect-ratio: 16 / 10; } .cms-image.kb-img-r-4x3 img { aspect-ratio: 4 / 3; } .cms-image.kb-img-r-1x1 img { aspect-ratio: 1; }
.cms-image.kb-img-fit-contain img { object-fit: contain; }
.cms-image.kb-img-overlay { position: relative; }
.cms-image.kb-img-overlay::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--kb-overlay, transparent); opacity: var(--kb-overlay-o, .4); pointer-events: none; }

/* ---------- 3.5 button with its own colours (HANDOFF 15.5): empty = the button's look; hover darker by itself ---------- */
/* 3.5.3 (HANDOFF 17.3): the line of a button with its own colours is an inset shadow (the button keeps its size) */
.btn.kb-btn-own { --kb-btn-bg-x: var(--kb-btn-bg, var(--bs-btn-bg)); background-color: var(--kb-btn-bg-x); color: var(--kb-btn-fg, var(--bs-btn-color)); border-color: transparent; box-shadow: inset 0 0 0 2px var(--kb-btn-bd, var(--kb-btn-bg-x)); }
.btn.kb-btn-own:hover, .btn.kb-btn-own:focus-visible { background-color: var(--kb-btn-hover, color-mix(in srgb, var(--kb-btn-bg-x) 86%, #000)); color: var(--kb-btn-hover-fg, var(--kb-btn-fg, var(--bs-btn-hover-color))); border-color: transparent; box-shadow: inset 0 0 0 2px var(--kb-btn-bd, var(--kb-btn-hover, color-mix(in srgb, var(--kb-btn-bg-x) 86%, #000))); }
.btn.kb-btn-own:focus-visible { box-shadow: inset 0 0 0 2px var(--kb-btn-bd, var(--kb-btn-bg-x)), 0 0 0 3px color-mix(in srgb, var(--kb-btn-bg-x) 45%, transparent); }
/* 3.5.2: a banner's own picture for phones */
.kp-mobile { display: none; }
.kp-mobile { position: absolute; inset: 0; } .kp-mobile img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 575.98px) { .kp-box.has-mobile .kp-pages { display: none; } .kp-box.has-mobile .kp-mobile { display: block; } }
/* 3.5.2: a picture cut by hand to its shape — the point kept in the middle and the zoom */
.cms-image.kb-img-crop { overflow: hidden; }
.cms-image.kb-img-crop img { object-position: var(--kb-img-x, 50%) var(--kb-img-y, 50%); transform: scale(var(--kb-img-z, 1)); transform-origin: var(--kb-img-x, 50%) var(--kb-img-y, 50%); }
/* 3.5.3 (HANDOFF 17.1): words marked on the page — classes only (the HTML filter keeps classes, never style="").
   Colour: theme slots kb-tc-{primary,accent,dark,grey}, "my colours" kb-tc-c1…c12 (rules in the theme stylesheet),
   a gradient; mark: shape × colour; line: shape × colour. Marks never change the line height or push the words. */
.kb-tc-primary { color: var(--primary); } .kb-tc-accent { color: var(--secondary); } .kb-tc-dark { color: var(--dark); } .kb-tc-grey { color: var(--grey); }
.kb-b { font-weight: 700; }
.kb-s { text-decoration: line-through; }
.kb-tx-grad { background: linear-gradient(100deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) { .kb-tx-grad { background: none; color: var(--primary); } }
@media (forced-colors: active) { .kb-tx-grad { background: none; color: CanvasText; } }
.kb-hc-accent { --kb-hc: #FFE58A; } .kb-hc-mint { --kb-hc: #CDEFE0; } .kb-hc-lilac { --kb-hc: #E6DDFF; } .kb-hc-peach { --kb-hc: #FFDCC8; } .kb-hc-sky { --kb-hc: #D5E8FF; }
.kb-hl-solid, .kb-hl-marker, .kb-hl-pill { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kb-hl-solid { background: var(--kb-hc, #FFE58A); border-radius: .18em; padding: 0 .12em; }
.kb-hl-marker { background: linear-gradient(transparent 55%, var(--kb-hc, #FFE58A) 55% 92%, transparent 92%); }
.kb-hl-pill { background: var(--kb-hc, #FFE58A); border-radius: 999px; padding: .02em .5em; }
.kb-dc-accent { --kb-dc: var(--secondary); } .kb-dc-primary { --kb-dc: var(--primary); } .kb-dc-dark { --kb-dc: var(--dark); }
.kb-u-line, .kb-u-dash, .kb-u-dot, .kb-u-double, .kb-u-wave { text-decoration-line: underline; text-decoration-color: var(--kb-dc, currentColor); text-decoration-thickness: max(2px, .07em); text-underline-offset: .18em; text-decoration-skip-ink: none; }
.kb-u-dash { text-decoration-style: dashed; } .kb-u-dot { text-decoration-style: dotted; text-decoration-thickness: max(3px, .09em); } .kb-u-double { text-decoration-style: double; }
.kb-u-wave { text-decoration-style: wavy; text-decoration-thickness: max(1.5px, .05em); text-underline-offset: .22em; }
.kb-u-swoosh, .kb-u-circle, .kb-u-strike2 { position: relative; white-space: nowrap; }
.kb-u-swoosh::after, .kb-u-circle::after, .kb-u-strike2::after { content: ""; position: absolute; pointer-events: none; background: var(--kb-dc, var(--secondary)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.kb-u-swoosh::after { left: -2%; right: -2%; bottom: -.16em; height: .32em; -webkit-mask-image: url("../img/kb-swoosh.svg"); mask-image: url("../img/kb-swoosh.svg"); }
.kb-u-circle::after { left: -10%; right: -10%; top: -18%; bottom: -14%; -webkit-mask-image: url("../img/kb-circle.svg"); mask-image: url("../img/kb-circle.svg"); }
.kb-u-strike2::after { left: -2%; right: -2%; top: 52%; height: .14em; border-radius: 99px; opacity: .75; transform: rotate(-2deg); }
@media (forced-colors: active) { .kb-u-swoosh::after, .kb-u-circle::after, .kb-u-strike2::after { background: CanvasText; } }
/* 3.5.4 (HANDOFF 19.2): five more lines under the words (mask SVGs, colour from kb-dc-*), and the line drawn in when
   the words come into view (kb-ua-draw; kumo.js adds kb-ua-in once at 60 %). Without JS / less motion: the full line. */
.kb-u-brush, .kb-u-zigzag, .kb-u-arc2, .kb-u-arrow, .kb-u-dotarc { position: relative; white-space: nowrap; }
.kb-u-brush { z-index: 0; }
.kb-u-brush::after, .kb-u-zigzag::after, .kb-u-arc2::after, .kb-u-arrow::after, .kb-u-dotarc::after { content: ""; position: absolute; pointer-events: none; background: var(--kb-dc, var(--secondary)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.kb-u-brush::after { z-index: -1; left: -4%; right: -4%; bottom: .02em; height: .62em; opacity: .55; -webkit-mask-image: url("../img/kb-brush.svg"); mask-image: url("../img/kb-brush.svg"); }
.kb-u-zigzag::after { left: 0; right: 0; bottom: -.2em; height: .26em; -webkit-mask-image: url("../img/kb-zigzag.svg"); mask-image: url("../img/kb-zigzag.svg"); }
.kb-u-arc2::after { left: -2%; right: -2%; bottom: -.3em; height: .38em; -webkit-mask-image: url("../img/kb-arc2.svg"); mask-image: url("../img/kb-arc2.svg"); }
.kb-u-arrow::after { left: 0; right: -6%; bottom: -.36em; height: .44em; -webkit-mask-image: url("../img/kb-arrow.svg"); mask-image: url("../img/kb-arrow.svg"); }
.kb-u-dotarc::after { left: 0; right: 0; bottom: -.24em; height: .28em; -webkit-mask-image: url("../img/kb-dotarc.svg"); mask-image: url("../img/kb-dotarc.svg"); }
@media (forced-colors: active) { .kb-u-brush::after, .kb-u-zigzag::after, .kb-u-arc2::after, .kb-u-arrow::after, .kb-u-dotarc::after { background: CanvasText; } }
html.js .kb-ua-draw:not(.kb-ua-in)::after { clip-path: inset(0 100% 0 0); }
html.js .kb-ua-draw.kb-ua-in::after { clip-path: inset(0 0 0 0); transition: clip-path 900ms cubic-bezier(.6, 0, .2, 1) var(--kb-ua-delay, 150ms); }
html.js .kb-ua-draw.kb-u-line:not(.kb-ua-in), html.js .kb-ua-draw.kb-u-dash:not(.kb-ua-in), html.js .kb-ua-draw.kb-u-dot:not(.kb-ua-in), html.js .kb-ua-draw.kb-u-double:not(.kb-ua-in), html.js .kb-ua-draw.kb-u-wave:not(.kb-ua-in) { text-decoration-color: transparent; }
.kb-ua-draw.kb-ua-in { transition: text-decoration-color 600ms ease 150ms; }
/* 3.5.4 (HANDOFF 19.0): five looks of a content element — data-look on the block (the first look is the old one and has
   no rule). Colours from the theme (--primary, --secondary, --sk-*); the settings of the block stay as they are. */
.cms-heading[data-look="bar"]::after { content: ""; display: block; width: 56px; height: 4px; margin-top: .4em; border-radius: 4px; background: var(--secondary); }
.cms-heading[data-look="bar"].text-center::after { margin-left: auto; margin-right: auto; } .cms-heading[data-look="bar"].text-end::after { margin-left: auto; }
.cms-heading[data-look="side"] { padding-left: .6em; border-left: 5px solid var(--primary); }
.cms-heading[data-look="band"] { display: inline-block; padding: .2em .6em; border-radius: .4em; background: var(--sk-soft, #F2F3F5); }
.cms-heading[data-look="big"] { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); line-height: 1.15; text-align: center; letter-spacing: -.01em; }
.cms-text[data-look="lead"] { font-size: 1.2rem; line-height: 1.65; }
.cms-text[data-look="note"] { padding: 18px 20px; border-radius: 14px; background: var(--sk-soft, #F2F3F5); }
.cms-text[data-look="note"] > :last-child, .cms-text[data-look="quote"] > :last-child { margin-bottom: 0; }
.cms-text[data-look="quote"] { padding-left: 18px; border-left: 4px solid var(--secondary); font-size: 1.1rem; }
@media (min-width: 768px) { .cms-text[data-look="cols"] { column-count: 2; column-gap: 40px; } .cms-text[data-look="cols"] > * { break-inside: avoid; } }
.cms-image[data-look="round"] img { border-radius: 18px; }
.cms-image[data-look="shadow"] img { border-radius: 12px; box-shadow: 0 22px 44px -22px rgba(17, 20, 43, .5); }
.cms-image[data-look="frame"] img { padding: 8px; border: 1px solid var(--sk-border, #DADDE5); border-radius: 14px; background: var(--sk-bg, #FFFFFF); }
.cms-image[data-look="circle"] img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.kb-list[data-look="boxes"] > li { padding: 10px 14px; border-radius: 12px; background: var(--sk-soft, #F2F3F5); }
.kb-list[data-look="lines"] > li + li { padding-top: 10px; border-top: 1px solid var(--sk-border, #DADDE5); }
@media (min-width: 576px) { .kb-list[data-look="two"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
.kb-list[data-look="pills"] { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-list[data-look="pills"] > li { margin: 0; padding: 6px 14px; border: 1px solid var(--sk-border, #DADDE5); border-radius: 999px; }
.sk-stat[data-look="plain"] .sk-stat-icon { display: none; }
.sk-stat[data-look="inline"] { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; text-align: left; }
.sk-stat[data-look="inline"] .sk-stat-icon { grid-row: span 2; font-size: 2rem; color: var(--kb-i-c, var(--primary)); }
.sk-stat[data-look="inline"] > p { margin: 0; }
.sk-stat[data-look="card"] { padding: 22px 20px; border-radius: 18px; background: var(--sk-bg, #FFFFFF); box-shadow: 0 16px 34px -20px rgba(17, 20, 43, .45), 0 0 0 1px var(--sk-border, rgba(17, 20, 43, .08)); }
.sk-stat[data-look="badge"] .sk-stat-icon { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: .5rem; border-radius: 50%; background: color-mix(in srgb, var(--kb-i-c, var(--primary)) 14%, transparent); color: var(--kb-i-c, var(--primary)); font-size: 1.35rem; }
.sk-stat .sk-stat-icon { color: var(--kb-i-c, var(--sk-ink, currentColor)); }
.sk-feature-outline { padding: 22px; border: 1.5px solid var(--sk-border-strong, var(--sk-border, #C9CDD8)); border-radius: var(--sk-radius-card, 16px); }
.sk-feature-outline .sk-feature-icon { display: inline-grid; place-items: center; margin-bottom: 12px; border: 1.5px solid currentColor; }
.sk-testimonial.sk-testimonial-bigquote { position: relative; padding-top: 2.6rem; }
.sk-testimonial.sk-testimonial-bigquote::before { content: "\201C"; position: absolute; left: 0; top: -.15em; color: var(--secondary); font: 800 4.5rem/1 Georgia, serif; }
.sk-testimonial.sk-testimonial-side { padding-left: 22px; border-left: 4px solid var(--primary); }
.cms-accordion[data-look="cards"] .card { margin-bottom: 10px; border: 1px solid var(--sk-border, #DADDE5) !important; border-radius: 14px !important; overflow: hidden; }
.cms-accordion[data-look="filled"] .card-header { background: var(--sk-soft, #F2F3F5) !important; border-radius: 12px; }
.cms-accordion[data-look="filled"] .card { margin-bottom: 8px; border: 0 !important; }
.cms-accordion[data-look="plus"] .accordion-toggle { position: relative; padding-right: 2.2em !important; }
.cms-accordion[data-look="plus"] .accordion-toggle::before { display: none !important; }
.cms-accordion[data-look="plus"] .accordion-toggle::after { content: "+"; position: absolute; right: .4em; top: 50%; transform: translateY(-50%); font-size: 1.4em; font-weight: 700; line-height: 1; }
.cms-accordion[data-look="plus"] .accordion-toggle[aria-expanded="true"]::after { content: "\2212"; }
.cms-accordion[data-look="minimal"] .card, .cms-accordion[data-look="minimal"] .card-header { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.cms-accordion[data-look="minimal"] .card + .card { border-top: 1px solid var(--sk-border, #DADDE5) !important; }
.sk-steps[data-look="line"] { grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
.sk-steps[data-look="line"] .sk-step { position: relative; padding: 0 0 24px 52px; border-top: 0; }
.sk-steps[data-look="line"] .sk-step::before { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: var(--primary-inverse, #FFFFFF); font-size: 1rem; }
.sk-steps[data-look="line"] .sk-step:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px; background: var(--sk-border, #DADDE5); }
.sk-steps[data-look="cards"] .sk-step { padding: 20px; border: 0; border-radius: 16px; background: var(--sk-soft, #F2F3F5); }
.sk-steps[data-look="arrows"] .sk-step { position: relative; padding-top: 16px; border-top-style: dashed; }
.sk-steps[data-look="arrows"] .sk-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -18px; top: -14px; color: var(--primary); font-size: 1.3rem; font-weight: 800; }
@media (max-width: 575.98px) { .sk-steps[data-look="arrows"] .sk-step:not(:last-child)::after { display: none; } }
.sk-steps[data-look="minimal"] .sk-step { padding-top: 0; border-top: 0; }
.sk-steps[data-look="minimal"] .sk-step::before { font-size: .85rem; letter-spacing: .08em; color: var(--sk-muted, currentColor); }
/* 3.5.4 (HANDOFF 19.0): icon · card · price plan · team member — and their looks */
.kb-icon { line-height: 1; }
.kb-icon-in { display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; color: var(--kb-i-c, var(--primary)); font-size: 1.75rem; text-decoration: none; }
.kb-icon.is-s .kb-icon-in { font-size: 1.15rem; } .kb-icon.is-l .kb-icon-in { font-size: 2.5rem; } .kb-icon.is-xl .kb-icon-in { font-size: 3.5rem; }
.kb-icon[data-look="circle"] .kb-icon-in, .kb-icon[data-look="square"] .kb-icon-in { width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--kb-i-c, var(--primary)); color: var(--primary-inverse, #FFFFFF); font-size: 1.4rem; }
.kb-icon[data-look="square"] .kb-icon-in { border-radius: .55em; }
.kb-icon[data-look="outline"] .kb-icon-in { width: 2.2em; height: 2.2em; border: 2px solid currentColor; border-radius: 50%; font-size: 1.4rem; }
.kb-icon[data-look="soft"] .kb-icon-in { width: 2.2em; height: 2.2em; border-radius: .55em; background: color-mix(in srgb, var(--kb-i-c, var(--primary)) 14%, transparent); font-size: 1.4rem; }
.kb-icon.is-s[data-look] .kb-icon-in { font-size: 1rem; } .kb-icon.is-l[data-look] .kb-icon-in { font-size: 2rem; } .kb-icon.is-xl[data-look] .kb-icon-in { font-size: 2.8rem; }
.kb-card { position: relative; display: grid; gap: 12px; align-content: start; height: 100%; }
.kb-card-pic { overflow: hidden; border-radius: 14px; } .kb-card-pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.kb-card-ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--sk-soft, #F2F3F5); color: var(--primary); font-size: 1.3rem; }
.kb-card-body { display: grid; gap: 6px; }
.kb-card-t { margin: 0; font-size: 1.2rem; line-height: 1.35; } .kb-card-x { margin: 0; color: var(--sk-text, inherit); }
.kb-card-a { justify-self: start; font-weight: 700; text-decoration: none; } .kb-card-a::after { content: ""; position: absolute; inset: 0; } .kb-card-a:focus-visible { outline: none; } .kb-card:has(.kb-card-a:focus-visible) { outline: 3px solid var(--primary); outline-offset: 4px; border-radius: 16px; }
.kb-card-a i { margin-left: .3em; font-size: .85em; transition: transform 200ms; } .kb-card:hover .kb-card-a i { transform: translateX(3px); }
.kb-card[data-look="shadow"], .kb-card[data-look="outline"] { padding: 16px; border-radius: 18px; background: var(--sk-bg, #FFFFFF); }
.kb-card[data-look="shadow"] { box-shadow: 0 18px 38px -22px rgba(17, 20, 43, .45), 0 0 0 1px var(--sk-border, rgba(17, 20, 43, .06)); }
.kb-card[data-look="outline"] { border: 1.5px solid var(--sk-border-strong, var(--sk-border, #C9CDD8)); }
@media (min-width: 576px) { .kb-card[data-look="side"] { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: 18px; } .kb-card[data-look="side"] .kb-card-pic img { aspect-ratio: 1; } }
.kb-card[data-look="over"] { overflow: hidden; border-radius: 18px; color: #FFFFFF; }
.kb-card[data-look="over"] .kb-card-pic { grid-area: 1 / 1; border-radius: 0; } .kb-card[data-look="over"] .kb-card-pic img { aspect-ratio: 3 / 4; }
.kb-card[data-look="over"] .kb-card-body { grid-area: 1 / 1; align-self: end; z-index: 1; padding: 18px; background: linear-gradient(transparent, rgba(10, 12, 24, .82) 45%); }
.kb-card[data-look="over"] .kb-card-t, .kb-card[data-look="over"] .kb-card-x, .kb-card[data-look="over"] .kb-card-a { color: #FFFFFF; }
.kb-plan { position: relative; display: grid; gap: 10px; align-content: start; height: 100%; }
.kb-plan-badge { justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--secondary); color: var(--secondary-inverse, #FFFFFF); font-size: .8rem; font-weight: 700; }
.kb-plan-name { margin: 0; font-size: 1.15rem; }
.kb-plan-price { margin: 0; } .kb-plan-price b { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 1.1; } .kb-plan-price span { margin-left: .35em; color: var(--sk-muted, inherit); }
.kb-plan-note { margin: 0; color: var(--sk-muted, inherit); }
.kb-plan-list { display: grid; gap: 8px; margin: 6px 0; padding: 0; list-style: none; }
.kb-plan-list li { display: grid; grid-template-columns: 1.2em minmax(0, 1fr); gap: 8px; align-items: baseline; } .kb-plan-list i { color: var(--primary); }
.kb-plan-list li.is-off { color: var(--sk-muted, inherit); } .kb-plan-list li.is-off i { color: inherit; } .kb-plan-list li.is-off > span { text-decoration: line-through; }
.kb-plan-btn { justify-self: stretch; margin-top: 6px; }
.kb-plan[data-look="card"], .kb-plan[data-look="dark"], .kb-plan[data-look="outline"] { padding: 24px 22px; border-radius: 20px; }
.kb-plan[data-look="card"] { background: var(--sk-bg, #FFFFFF); box-shadow: 0 20px 40px -24px rgba(17, 20, 43, .45), 0 0 0 1px var(--sk-border, rgba(17, 20, 43, .06)); }
.kb-plan[data-look="dark"] { background: var(--sk-dark, #14161F); color: var(--sk-dark-text, #F3F4F8); }
.kb-plan[data-look="dark"] .kb-plan-name, .kb-plan[data-look="dark"] .kb-plan-price b { color: #FFFFFF; } .kb-plan[data-look="dark"] .kb-plan-note, .kb-plan[data-look="dark"] .kb-plan-price span, .kb-plan[data-look="dark"] li.is-off { color: rgba(255, 255, 255, .78); } .kb-plan[data-look="dark"] .kb-plan-list i { color: var(--secondary); }
.kb-plan[data-look="outline"] { border: 2px solid var(--primary); }
.kb-plan[data-look="minimal"] .kb-plan-list li { padding-bottom: 8px; border-bottom: 1px solid var(--sk-border, #DADDE5); } .kb-plan[data-look="minimal"] .kb-plan-list i { display: none; } .kb-plan[data-look="minimal"] .kb-plan-list li { grid-template-columns: minmax(0, 1fr); }
.kb-team { display: grid; gap: 12px; align-content: start; }
.kb-team-pic { overflow: hidden; border-radius: 16px; background: var(--sk-soft, #F2F3F5); } .kb-team-pic img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.kb-team-pic.is-empty { display: grid; place-items: center; aspect-ratio: 1; color: var(--sk-muted, #888); font-size: 2.5rem; }
.kb-team-body { display: grid; gap: 2px; } .kb-team-name { margin: 0; font-size: 1.15rem; } .kb-team-role { margin: 0; color: var(--primary); font-weight: 700; } .kb-team-x { margin: 6px 0 0; color: var(--sk-text, inherit); } .kb-team-a { justify-self: start; margin-top: 6px; font-weight: 700; }
.kb-team[data-look="round"] { justify-items: center; text-align: center; } .kb-team[data-look="round"] .kb-team-pic { width: min(180px, 70%); border-radius: 50%; } .kb-team[data-look="round"] .kb-team-a { justify-self: center; }
@media (min-width: 576px) { .kb-team[data-look="side"] { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 18px; } }
.kb-team[data-look="side"] .kb-team-pic { border-radius: 50%; max-width: 120px; }
.kb-team[data-look="over"] { position: relative; overflow: hidden; border-radius: 18px; } .kb-team[data-look="over"] .kb-team-pic { border-radius: 0; } .kb-team[data-look="over"] .kb-team-pic img { aspect-ratio: 4 / 5; }
.kb-team[data-look="over"] .kb-team-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; background: linear-gradient(transparent, rgba(10, 12, 24, .85) 40%); color: #FFFFFF; }
.kb-team[data-look="over"] .kb-team-name, .kb-team[data-look="over"] .kb-team-x, .kb-team[data-look="over"] .kb-team-a { color: #FFFFFF; } .kb-team[data-look="over"] .kb-team-role { color: rgba(255, 255, 255, .88); }
.kb-team[data-look="minimal"] .kb-team-pic { display: none; } .kb-team[data-look="minimal"] { padding-left: 14px; border-left: 3px solid var(--primary); }
@media (prefers-reduced-motion: reduce) { .kb-card-a i { transition: none; } }
/* 3.5.4: the fifth button look — a round icon in front of the words (kb-btn-icon), and the icon on a button (kb-bi) */
.kb-bi { margin-left: .5em; font-size: .9em; transition: transform 200ms; }
.kb-bi.is-before { margin: 0 .5em 0 0; }
.btn.kb-btn-icon { display: inline-flex; align-items: center; gap: .55em; padding-left: .45em; }
.btn.kb-btn-icon .kb-bi { display: grid; place-items: center; width: 2em; height: 2em; margin: 0; border-radius: 50%; background: rgba(255, 255, 255, .22); order: -1; }
/* 3.5.4 (HANDOFF 19.2): every button of the block moves the same — when pointed at, and when it comes into view (one
   after the other, 120 ms apart; kumo.js adds is-in once). Less motion: still. */
.kb-bh-lift .btn { transition: transform 200ms, box-shadow 200ms; } .kb-bh-lift .btn:hover, .kb-bh-lift .btn:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 22px -12px rgba(18, 23, 53, .5); }
.kb-bh-arrow .btn:hover .kb-bi:not(.is-before), .kb-bh-arrow .btn:focus-visible .kb-bi:not(.is-before) { transform: translateX(4px); }
.kb-bh-shine .btn { position: relative; overflow: hidden; } .kb-bh-shine .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform 600ms; pointer-events: none; } .kb-bh-shine .btn:hover::after { transform: translateX(120%); }
.kb-bh-pulse .btn:first-of-type { animation: kb-pulse 2.4s ease-in-out infinite; }
@keyframes kb-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
html.js .kb-be-rise:not(.is-in) .btn, html.js .kb-be-pop:not(.is-in) .btn { opacity: 0; }
.kb-be-rise.is-in .btn { animation: kb-be-rise 500ms cubic-bezier(.2, .8, .2, 1) both; } .kb-be-pop.is-in .btn { animation: kb-be-pop 420ms cubic-bezier(.3, 1.4, .5, 1) both; }
.kb-be-rise.is-in .btn:nth-of-type(2), .kb-be-pop.is-in .btn:nth-of-type(2) { animation-delay: 120ms; } .kb-be-rise.is-in .btn:nth-of-type(3), .kb-be-pop.is-in .btn:nth-of-type(3) { animation-delay: 240ms; } .kb-be-rise.is-in .btn:nth-of-type(4), .kb-be-pop.is-in .btn:nth-of-type(4) { animation-delay: 360ms; }
@keyframes kb-be-rise { from { opacity: 0; transform: translateY(14px); } } @keyframes kb-be-pop { from { opacity: 0; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .kb-bh-pulse .btn:first-of-type, .kb-be-rise.is-in .btn, .kb-be-pop.is-in .btn { animation: none; } html.js .kb-be-rise:not(.is-in) .btn, html.js .kb-be-pop:not(.is-in) .btn { opacity: 1; } .kb-bh-lift .btn:hover, .kb-bh-lift .btn:focus-visible { transform: none; } .kb-bh-shine .btn::after { display: none; } .kb-bi { transition: none; } }
@media (prefers-reduced-motion: reduce) { html.js .kb-ua-draw:not(.kb-ua-in)::after { clip-path: none; } html.js .kb-ua-draw.kb-ua-in::after { transition: none; } html.js .kb-ua-draw:not(.kb-ua-in) { text-decoration-color: var(--kb-dc, currentColor); } .kb-ua-draw.kb-ua-in { transition: none; } }

/* 3.5.3 (HANDOFF 17.3): four looks of a button — solid (the style), ghost (a line), soft (a tint), link (words) */
.btn.kb-btn-ghost { --kb-btn-tone: var(--kb-btn-bg, var(--primary)); background-color: transparent; color: var(--kb-btn-fg, var(--kb-btn-tone)); border-color: transparent; box-shadow: inset 0 0 0 2px var(--kb-btn-bd, var(--kb-btn-tone)); }
.btn.kb-btn-ghost:hover, .btn.kb-btn-ghost:focus-visible { background-color: var(--kb-btn-hover, var(--kb-btn-tone)); color: var(--kb-btn-hover-fg, #FFFFFF); }
.btn.kb-btn-soft { --kb-btn-tone: var(--kb-btn-bg, var(--primary)); background-color: color-mix(in srgb, var(--kb-btn-tone) 14%, #FFFFFF); color: var(--kb-btn-fg, color-mix(in srgb, var(--kb-btn-tone) 80%, #000)); border-color: transparent; box-shadow: inset 0 0 0 2px var(--kb-btn-bd, transparent); }
.btn.kb-btn-soft:hover, .btn.kb-btn-soft:focus-visible { background-color: var(--kb-btn-hover, color-mix(in srgb, var(--kb-btn-tone) 24%, #FFFFFF)); color: var(--kb-btn-hover-fg, var(--kb-btn-fg, color-mix(in srgb, var(--kb-btn-tone) 80%, #000))); }
.btn.kb-btn-link { background-color: transparent; color: var(--kb-btn-fg, var(--primary)); border-color: transparent; box-shadow: none; padding-inline: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.btn.kb-btn-link:hover, .btn.kb-btn-link:focus-visible { background-color: transparent; color: var(--kb-btn-hover-fg, var(--kb-btn-hover, var(--kb-btn-fg, var(--primary)))); }
/* 3.5.4: a button group made "solid": every button in the main colour, whatever its own style */
.btn.sk-btn.kb-btn-solid, .btn.sk-btn.kb-btn-icon { background-color: var(--sk-btn, var(--primary)); color: var(--sk-btn-ink, var(--primary-inverse, #FFFFFF)); border-color: transparent; }
.btn.sk-btn.kb-btn-solid:hover, .btn.sk-btn.kb-btn-solid:focus-visible, .btn.sk-btn.kb-btn-icon:hover, .btn.sk-btn.kb-btn-icon:focus-visible { background-color: var(--sk-btn-hover, var(--primary-100, var(--primary))); color: var(--sk-btn-ink, var(--primary-inverse, #FFFFFF)); }
/* 3.5.3 (HANDOFF 17.2): the statistic — number, prefix / suffix and label coloured apart; it moves only once it is in
   view (kumo.js adds .is-run), so without JavaScript or with less motion it simply shows its last value */
.kb-stat .kb-stat-v { color: var(--kb-n-c, inherit); }
.kb-stat .kb-stat-l { color: var(--kb-l-c, inherit); }
.kb-stat .kb-n-pre, .kb-stat .kb-n-suf { color: var(--kb-x-c, inherit); font-size: .6em; font-weight: 700; }
.kb-stat .kb-n-pre:empty, .kb-stat .kb-n-suf:empty { display: none; }
.kb-stat.is-xl .kb-stat-v { font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem); }
.kb-stat .kb-n { display: inline-block; font-variant-numeric: tabular-nums; }
.kb-stat.is-run.kb-na-pop .kb-n { animation: kb-n-pop var(--kb-n-dur, .6s) cubic-bezier(.2, 1.4, .4, 1) both; }
.kb-stat.is-run.kb-na-roll .kb-n { animation: kb-n-roll var(--kb-n-dur, .7s) cubic-bezier(.16, 1, .3, 1) both; }
.kb-stat.is-run.kb-la-rise .kb-stat-l { animation: kb-l-rise 500ms cubic-bezier(.16, 1, .3, 1) var(--kb-l-delay, .3s) both; }
.kb-stat.is-run.kb-la-fade .kb-stat-l { animation: kb-l-fade 500ms ease var(--kb-l-delay, .3s) both; }
@keyframes kb-n-pop { from { transform: scale(.6); opacity: 0; } }
@keyframes kb-n-roll { from { transform: translateY(.6em); opacity: 0; clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes kb-l-rise { from { transform: translateY(10px); opacity: 0; } }
@keyframes kb-l-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kb-stat .kb-n, .kb-stat .kb-stat-l { animation: none !important; } }
/* 3.5.3 (HANDOFF 17.10): forms — two half-width fields side by side, steps, messages under fields and a summary on top,
   stars, the robots' field out of sight; works the same without kumo-forms.js (every step shown, browser checks) */
.kf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.kf-field { grid-column: 1 / -1; margin-bottom: 14px; }
.kf-field.kf-w-half { grid-column: span 1; }
@media (max-width: 575.98px) { .kf-field.kf-w-half { grid-column: 1 / -1; } }
.kf-field[hidden] { display: none; }
.kf-label { display: block; margin-bottom: 4px; font-weight: 700; }
.kf-req { color: #B42318; }
.kf-help { margin: 4px 0 0; color: inherit; opacity: .8; font-size: .875em; }
.kf-err { margin: 4px 0 0; color: #B42318; font-size: .875em; font-weight: 700; }
.kf-err[hidden] { display: none; }
.kf-field.is-bad .form-control, .kf-field.is-bad .form-select { border-color: #B42318; }
.kf-step { min-width: 0; margin: 0 0 8px; padding: 0; border: 0; }
.kf-step[hidden] { display: none; }
.kf-legend { margin-bottom: 12px; font-size: 1.125rem; font-weight: 700; }
.kf-progress { margin: 0 0 8px; color: inherit; opacity: .8; font-size: .875em; font-weight: 700; }
.kf-choices { min-width: 0; margin: 0; padding: 0; border: 0; }
.kf-choices legend { float: none; width: auto; margin-bottom: 4px; font-size: 1rem; }
.kf-choices .form-check, .kf-consent { min-height: 24px; }
.kf-h { margin: 8px 0 4px; font-size: 1.125rem; font-weight: 700; }
.kf-hr { margin: 6px 0; }
.kf-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.kf-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kf-stars label { display: grid; place-items: center; width: 32px; height: 32px; color: #9AA1B5; font-size: 22px; cursor: pointer; }
.kf-stars input:checked ~ label, .kf-stars label:hover, .kf-stars label:hover ~ label { color: #B7791F; }
.kf-stars input:focus-visible + label { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.kf-summary { margin-bottom: 14px; padding: 12px 16px; border-radius: 10px; background: #FDECEA; color: #8C1D18; }
.kf-summary[hidden] { display: none; }
.kf-summary p { margin: 0 0 4px; font-weight: 700; }
.kf-summary ul { margin: 0; padding-left: 18px; }
.kf-summary a { color: inherit; text-decoration: underline; }
.kf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kf-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kf-actions [hidden] { display: none; }
.kf-closed { padding: 14px 16px; border-radius: 10px; background: #F4F5FA; color: #11142B; font-weight: 700; }
.kf-staff { display: block; margin-top: 4px; color: #5B6278; font-size: .875em; font-weight: 400; }

/* ------------------------------------------------------------------ 3.5.3 listing pages of posts (HANDOFF 17.11)
   .kl carries the look as data-*: layout (grid | magazine | list | masonry), cols, card (shadow | line | flat | overlay),
   ratio, radius, hide (what a card leaves out), head (left | center | hidden), search, catbar, pag */
.kl { --kl-r: 14px; --kl-cols: 3; padding-top: 32px; padding-bottom: 48px; }
.kl[data-radius="0"] { --kl-r: 0px; } .kl[data-radius="4"] { --kl-r: 4px; } .kl[data-radius="8"] { --kl-r: 8px; } .kl[data-radius="12"] { --kl-r: 12px; }
.kl[data-radius="16"] { --kl-r: 16px; } .kl[data-radius="20"] { --kl-r: 20px; } .kl[data-radius="24"] { --kl-r: 24px; }
.kl[data-cols="2"] { --kl-cols: 2; } .kl[data-cols="4"] { --kl-cols: 4; }
.kl-head { display: grid; gap: 10px; margin-bottom: 18px; }
.kl-h1 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.2; }
.kl-intro { max-width: 60ch; margin: 0; color: inherit; opacity: .8; }
.kl[data-head="center"] .kl-head { justify-items: center; text-align: center; }
.kl[data-head="center"] .kl-intro { margin-inline: auto; }
.kl[data-head="hidden"] .kl-h1, .kl[data-head="hidden"] .kl-intro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kl-search { display: flex; width: min(420px, 100%); }
.kl-search .form-control { min-height: 44px; border-radius: 999px 0 0 999px; }
.kl-search-go { min-width: 48px; min-height: 44px; border: 0; border-radius: 0 999px 999px 0; background: var(--primary); color: var(--primary-inverse); }
.kl[data-search="0"] .kl-search { display: none; }
.kl-catbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.kl[data-catbar="0"] .kl-catbar { display: none; }
.kl-catbar a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--grey-100); color: var(--dark); font-weight: 700; text-decoration: none; }
.kl-catbar a:hover { background: var(--grey-200); }
.kl-catbar a[aria-current="page"] { background: var(--primary); color: var(--primary-inverse); }
.kl-list { display: grid; grid-template-columns: repeat(var(--kl-cols), minmax(0, 1fr)); gap: 24px; }
.kl-card { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; border-radius: var(--kl-r); background: var(--light); color: var(--dark); }
.kl[data-card="shadow"] .kl-card { box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 28px -14px rgba(0, 0, 0, .22); }
.kl[data-card="line"] .kl-card { box-shadow: inset 0 0 0 1px var(--kumo-line); }
.kl[data-card="flat"] .kl-card { background: transparent; border-radius: 0; }
.kl[data-card="flat"] .kl-media { border-radius: var(--kl-r); }
.kl-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grey-100); }
.kl[data-ratio="4-3"] .kl-media { aspect-ratio: 4 / 3; } .kl[data-ratio="1-1"] .kl-media { aspect-ratio: 1 / 1; }
.kl-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.kl-card:hover .kl-media img { transform: scale(1.04); }
.kl-noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--grey-100), var(--grey-200)); }
.kl-body { display: grid; align-content: start; gap: 6px; padding: 16px 18px 18px; }
.kl[data-card="flat"] .kl-body { padding: 12px 2px 0; }
.kl-cat { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--grey-100); font-size: .8125rem; font-weight: 700; }
.kl-title { margin: 0; font-size: 1.1875rem; font-weight: 800; line-height: 1.35; }
.kl-title a { color: inherit; text-decoration: none; }
.kl-title a:hover { text-decoration: underline; }
.kl-title a::after { content: ""; position: absolute; inset: 0; }
.kl-ex { margin: 0; opacity: .85; }
.kl-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 0; font-size: .875rem; opacity: .8; }
.kl-tags { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; font-weight: 700; color: var(--primary); }
.kl[data-hide~="image"] .kl-media, .kl[data-hide~="cat"] .kl-cat, .kl[data-hide~="excerpt"] .kl-ex, .kl[data-hide~="date"] .kl-date,
.kl[data-hide~="author"] .kl-author, .kl[data-hide~="read"] .kl-read, .kl[data-hide~="tags"] .kl-tags { display: none; }
.kl[data-hide~="image"] .kl-card { grid-template-rows: 1fr; }
/* text on the picture */
.kl[data-card="overlay"] .kl-card { grid-template-rows: 1fr; color: #FFFFFF; }
.kl[data-card="overlay"] .kl-media { grid-area: 1 / 1; aspect-ratio: 4 / 5; }
.kl[data-card="overlay"] .kl-body { grid-area: 1 / 1; align-self: end; position: relative; padding-top: 48px; background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); }
.kl[data-card="overlay"] .kl-cat { background: rgba(255, 255, 255, .92); color: #111111; }
.kl[data-card="overlay"] .kl-tags { color: #FFFFFF; }
/* magazine: the first post leads */
.kl[data-layout="magazine"] .kl-card:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: 1fr; }
.kl[data-layout="magazine"] .kl-card:first-child .kl-media { aspect-ratio: auto; min-height: 320px; }
.kl[data-layout="magazine"] .kl-card:first-child .kl-body { align-content: center; padding: 28px; }
.kl[data-layout="magazine"] .kl-card:first-child .kl-title { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.kl[data-layout="magazine"][data-card="overlay"] .kl-card:first-child { grid-template-columns: 1fr; }
/* list: picture beside the words */
.kl[data-layout="list"] .kl-list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.kl[data-layout="list"] .kl-card { grid-template-columns: minmax(160px, 300px) minmax(0, 1fr); grid-template-rows: 1fr; }
.kl[data-layout="list"][data-hide~="image"] .kl-card { grid-template-columns: 1fr; }
.kl[data-layout="list"] .kl-body { align-content: center; }
/* masonry: columns, pictures keep their shape */
.kl[data-layout="masonry"] .kl-list { display: block; columns: var(--kl-cols); column-gap: 24px; }
.kl[data-layout="masonry"] .kl-card { display: block; margin-bottom: 24px; break-inside: avoid; }
.kl[data-layout="masonry"] .kl-media { aspect-ratio: auto; }
.kl[data-layout="masonry"] .kl-media img { height: auto; }
.kl-empty { padding: 40px 0; font-size: 1.125rem; }
.kl-pag { display: grid; justify-items: center; gap: 12px; margin-top: 32px; }
.kl-more { min-height: 46px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--primary); color: var(--primary-inverse); font-weight: 800; }
.kl-more[hidden] { display: none; }
.kl-more.is-loading { opacity: .7; }
.is-kl-more .cms-pagination { display: none; }
@media (max-width: 991.98px) { .kl-list { --kl-cols: 2; } .kl[data-layout="masonry"] .kl-list { columns: 2; } }
@media (max-width: 575.98px) {
	.kl-list { grid-template-columns: minmax(0, 1fr); }
	.kl[data-layout="masonry"] .kl-list { columns: 1; }
	.kl[data-layout="magazine"] .kl-card:first-child, .kl[data-layout="list"] .kl-card { grid-template-columns: minmax(0, 1fr); }
	.kl[data-layout="magazine"] .kl-card:first-child .kl-media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) { .kl-media img { transition: none; } .kl-card:hover .kl-media img { transform: none; } }

/* 3.5.3 listing pages of products: new looks on .sk-products-page (nothing set = as before) */
.sk-products-page[data-frame="shadow"] .sk-product-card { box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 28px -14px rgba(0, 0, 0, .22); }
.sk-products-page[data-frame="line"] .sk-product-card { box-shadow: inset 0 0 0 1px var(--kumo-line); }
.sk-products-page[data-frame="flat"] .sk-product-card { box-shadow: none; background: transparent; }
.sk-products-page[data-radius] .sk-product-card, .sk-products-page[data-radius] .sk-product-media { border-radius: var(--kl-r, 12px); }
.sk-products-page[data-radius="0"] { --kl-r: 0px; } .sk-products-page[data-radius="4"] { --kl-r: 4px; } .sk-products-page[data-radius="8"] { --kl-r: 8px; }
.sk-products-page[data-radius="12"] { --kl-r: 12px; } .sk-products-page[data-radius="14"] { --kl-r: 14px; } .sk-products-page[data-radius="16"] { --kl-r: 16px; }
.sk-products-page[data-radius="20"] { --kl-r: 20px; } .sk-products-page[data-radius="24"] { --kl-r: 24px; }
.sk-products-page[data-button="none"] .sk-product-more { display: none; }
.sk-products-page[data-button="solid"] .sk-product-more { padding: 8px 16px; border-radius: 999px; background: var(--primary); color: var(--primary-inverse); text-decoration: none; }
.sk-products-page[data-button="outline"] .sk-product-more { padding: 7px 15px; border: 1px solid currentColor; border-radius: 999px; background: transparent; text-decoration: none; }
.sk-products-page[data-hide~="desc"] .sk-product-excerpt, .sk-products-page[data-hide~="price"] .sk-price, .sk-products-page[data-hide~="price"] .sk-price-text,
.sk-products-page[data-hide~="badge"] .sk-product-badge { display: none; }
.sk-products-page[data-crumb="0"] .sk-products-crumbs { display: none; }
.sk-price-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.sk-price-filter label { display: grid; gap: 2px; font-size: .875rem; font-weight: 700; }
.sk-price-filter input { width: 120px; min-height: 40px; }
@media (max-width: 991.98px) {
	.sk-products-page[data-mfilter="bar"] .sk-filter-toggle { display: none; }
	.sk-products-page[data-mfilter="bar"] .sk-sidebar-layout { display: block; }
	.sk-products-page[data-mfilter="bar"] .sk-filter-panel { position: static; inset: auto; width: auto; height: auto; transform: none; visibility: visible; box-shadow: none; }
	.sk-products-page[data-mfilter="bar"] .sk-filter-panel-head { display: none; }
}

/* 3.5.3 (HANDOFF 17.11): Kumo Builder data blocks */
.kl-note { margin: 0; padding: 12px 14px; border: 1px dashed currentColor; border-radius: 10px; opacity: .8; font-size: .9375rem; }
.kl-head-block { margin-bottom: 18px; }
.kl-head-block.is-center { justify-items: center; text-align: center; }
.kl-block { padding-top: 0; padding-bottom: 0; }
.kl-products-block { max-width: none; margin: 0; padding: 0; }
.kl-no-contacts .sk-contact-stack { display: none; }
.kl-product-part .sk-product-details .container, .kl-product-part .sk-product-details > div { max-width: none; padding-left: 0; padding-right: 0; }
.kl-product-page .sk-product-pictures, .kl-product-page .sk-product-info { min-width: 0; }

/* 3.5.4 (HANDOFF 19.3, 19.4): the left / centre / right zones of a Blog / Product Builder layout — a grid from the page
   CSS (--kx-cols, --kx-areas; a zone turned off is not drawn). Phones: one column, the centre first; the left zone that
   holds filters folds behind a "Filters" button (kumo.js; without JavaScript it stays open). */
.row.kx-zones { display: grid; grid-template-columns: var(--kx-cols, 24% minmax(0, 1fr) 24%); grid-template-areas: var(--kx-areas, "l c r"); column-gap: 28px; row-gap: 24px; margin-left: 0; margin-right: 0; }
.row.kx-zones > .kx-zone { width: auto; max-width: none; flex: none; min-width: 0; padding-left: 0; padding-right: 0; margin: 0; }
.row.kx-zones > [data-zone="left"] { grid-area: l; display: var(--kx-ld, block); }
.row.kx-zones > [data-zone="center"] { grid-area: c; }
.row.kx-zones > [data-zone="right"] { grid-area: r; display: var(--kx-rd, block); }
@media (max-width: 767.98px) {
	.row.kx-zones { grid-template-columns: minmax(0, 1fr); grid-template-areas: "c" "l" "r"; }
	.row.kx-zones > [data-zone="left"], .row.kx-zones > [data-zone="right"] { display: block; }
	.row.kx-zones:has(> .has-drawer) { grid-template-areas: "l" "c" "r"; }
	.kx-drawer-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 12px; }
	.kx-zone.has-drawer:not(.is-open) > :not(.kx-drawer-btn) { display: none; }
}
@media (min-width: 768px) { .kx-drawer-btn { display: none; } }

/* 3.5.4 (HANDOFF 19.3): the Flash Sale badge on a product card */
.sk-product-badge--flash { background: #C42B1C; color: #FFFFFF; }
.sk-product-badge--flash + .sk-product-badge { margin-left: 4px; }

/* ======================= 3.5.4 (HANDOFF 19.3): product groups of Kumo Product Builder (.kx-b) =======================
   Each group sizes itself by its own width (container query), so the same look works in the centre and in a narrow
   left / right zone. The look is data-look on the group (the first look = no attribute); colours: --kx-badge, --kx-cd. */
.kx-b { --kx-ink: var(--dark, #16191F); --kx-mute: #5B6170; --kx-soft: #F1EEE7; --kx-line: #E7E1D6; container-type: inline-size; position: relative; min-width: 0; margin-bottom: 24px; }
.kx-b:has(> template[data-kx-gone]):not(:has(> .kx-empty)) { display: none; }
.kx-bt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 12px; }
.kx-bt h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--kx-ink); }
.kx-bt h2 i { color: var(--kx-ic, var(--primary)); }
.kx-more { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--primary); font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.kx-more i { font-size: .8em; transition: transform 160ms; } .kx-more:hover i { transform: translateX(3px); }
.kx-empty { margin: 0; padding: 18px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--kx-line); color: var(--kx-mute); text-align: center; }
/* the card */
.kx-grid { display: grid; grid-template-columns: repeat(var(--kx-cols, 2), minmax(0, 1fr)); gap: 14px; }
@container (min-width: 520px) { .kx-grid { --kx-cols: 3; } }
@container (min-width: 760px) { .kx-grid { --kx-cols: 4; } }
@container (max-width: 259px) { .kx-grid { --kx-cols: 1; } }
.kx-p { display: grid; align-content: start; gap: 4px; min-width: 0; }
.kx-pi { position: relative; display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #EDE8DF; }
.kx-pi img { width: 100%; height: 100%; object-fit: cover; }
.kx-badge { position: absolute; left: 8px; top: 8px; z-index: 1; padding: 2px 9px; border-radius: 999px; background: var(--kx-badge, #B42318); color: #FFFFFF; font-size: .75rem; font-weight: 800; }
.kx-badge.is-new { background: #11142B; }
.kx-pc { color: var(--kx-mute); font-size: .75rem; font-weight: 700; }
.kx-pn { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.35; } .kx-pn a { display: inline-block; min-height: 24px; color: var(--kx-ink); text-decoration: none; } .kx-pn a:hover { text-decoration: underline; }
.kx-pp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0; } .kx-pp b { color: #B42318; font-size: 1.05rem; } .kx-pp s { color: var(--kx-mute); font-size: .85rem; } .kx-pp.is-plain b { color: var(--kx-ink); }
/* a card laid out as a row (lists, rankings, the small ones beside a large one) */
.kx-rows .kx-p, .kx-rk-i .kx-p { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.kx-rows .kx-pi, .kx-rk-i .kx-pi { grid-row: span 3; border-radius: 10px; }
.kx-rows .kx-badge, .kx-rk-i .kx-badge { display: none; }

/* --- featured (starred): row · scroll · big · list · minimal; the same for Flash Sale and random where they match --- */
.kx-star[data-look="scroll"] .kx-grid, .kx-flash[data-look="scroll"] .kx-grid, .kx-rand[data-look="scroll"] .kx-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.kx-star[data-look="scroll"] .kx-p, .kx-flash[data-look="scroll"] .kx-p, .kx-rand[data-look="scroll"] .kx-p { flex: 0 0 min(240px, 60%); scroll-snap-align: start; }
.kx-star[data-look="big"] .kx-grid, .kx-flash[data-look="big"] .kx-grid, .kx-rand[data-look="big"] .kx-grid { grid-template-columns: 1.4fr 1fr 1fr; }
.kx-star[data-look="big"] .kx-p:first-child, .kx-flash[data-look="big"] .kx-p:first-child, .kx-rand[data-look="big"] .kx-p:first-child { grid-row: span 2; }
.kx-star[data-look="big"] .kx-p:first-child .kx-pn, .kx-flash[data-look="big"] .kx-p:first-child .kx-pn, .kx-rand[data-look="big"] .kx-p:first-child .kx-pn { font-size: 1.15rem; }
.kx-star[data-look="big"] .kx-p:nth-child(n+6), .kx-flash[data-look="big"] .kx-p:nth-child(n+6), .kx-rand[data-look="big"] .kx-p:nth-child(n+6) { display: none; }
.kx-star[data-look="list"] .kx-grid, .kx-flash[data-look="list"] .kx-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.kx-star[data-look="list"] .kx-p, .kx-flash[data-look="list"] .kx-p { grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.kx-star[data-look="list"] .kx-pi, .kx-flash[data-look="list"] .kx-pi { grid-row: span 3; border-radius: 10px; }
.kx-star[data-look="list"] .kx-badge, .kx-flash[data-look="list"] .kx-badge { left: 4px; top: 4px; padding: 0 6px; font-size: .7rem; }
.kx-star[data-look="minimal"] .kx-pi, .kx-rand[data-look="minimal"] .kx-pi, .kx-sc[data-look="minimal"] .kx-rows .kx-pi { display: none; }
.kx-star[data-look="minimal"] .kx-grid, .kx-rand[data-look="minimal"] .kx-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.kx-star[data-look="minimal"] .kx-p, .kx-rand[data-look="minimal"] .kx-p { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--kx-line); }
.kx-star[data-look="minimal"] .kx-pc, .kx-rand[data-look="minimal"] .kx-pc { grid-column: 1 / -1; }
@container (max-width: 519px) {
	.kx-star[data-look="big"] .kx-grid, .kx-flash[data-look="big"] .kx-grid, .kx-rand[data-look="big"] .kx-grid { grid-template-columns: 1fr 1fr; }
	.kx-star[data-look="big"] .kx-p:first-child, .kx-flash[data-look="big"] .kx-p:first-child, .kx-rand[data-look="big"] .kx-p:first-child { grid-column: 1 / -1; grid-row: auto; }
}

/* --- Flash Sale: row · scroll · big · list · banner; the countdown --- */
.kx-cdrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -4px 0 12px; }
.kx-cd { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.kx-cd b { display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 6px; border-radius: 8px; background: var(--kx-cd, #11142B); color: #FFFFFF; font-size: .95rem; }
.kx-cd span { color: var(--kx-mute); font-weight: 700; }
.kx-cd-l { margin-right: 6px; color: var(--kx-mute); font-size: .85rem; font-weight: 700; }
.kx-flash .kx-bt h2 i { color: var(--kx-ic, #C27A00); }
.kx-over { display: none; color: #8A1C12; font-weight: 700; }
.kx-b.is-over .kx-cd, .kx-b.is-over .kx-cd-l { display: none; } .kx-b.is-over .kx-over { display: inline; }
.kx-flash[data-look="banner"] { padding: 20px; border-radius: 22px; background: radial-gradient(120% 120% at 100% 0, #C2412D 0, transparent 55%), linear-gradient(135deg, #2A0E06, #5C1A0A); color: #FFFFFF; }
.kx-flash[data-look="banner"] .kx-bt h2, .kx-flash[data-look="banner"] .kx-pn a { color: #FFFFFF; } .kx-flash[data-look="banner"] .kx-pc { color: #FFD84D; }
.kx-flash[data-look="banner"] .kx-pp b, .kx-flash[data-look="banner"] .kx-more, .kx-flash[data-look="banner"] .kx-bt h2 i { color: #FFD84D; }
.kx-flash[data-look="banner"] .kx-pp s, .kx-flash[data-look="banner"] .kx-cd span, .kx-flash[data-look="banner"] .kx-cd-l { color: #F3C9BF; }
.kx-flash[data-look="banner"] .kx-cd b { background: var(--kx-cd, #FFD84D); color: #2A0E06; } .kx-flash[data-look="banner"] .kx-over { color: #FFD84D; }

/* --- products by group: pills · line · side · boxed · stack (tabs come with the script; without it, every group shows) --- */
.kx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.kx-tabs[hidden] { display: none; }
.kx-tabs button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--kx-soft); color: var(--kx-ink); font-weight: 700; font-size: .9rem; cursor: pointer; }
.kx-tabs button[aria-selected="true"] { background: var(--kx-ink); color: #FFFFFF; }
.kx-tg-p { display: grid; gap: 12px; } .kx-tg-p + .kx-tg-p { margin-top: 22px; } .kx-tg.is-tabs .kx-tg-p + .kx-tg-p { margin-top: 0; }
.kx-tg-p[hidden] { display: none; } .kx-tg-p:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 8px; }
.kx-tg-h { margin: 0; font-size: 1.05rem; font-weight: 700; } .kx-tg.is-tabs .kx-tg-h { display: none; }
.kx-tg[data-look="line"] .kx-tabs { gap: 0 18px; border-bottom: 1px solid var(--kx-line); }
.kx-tg[data-look="line"] .kx-tabs button { padding: 0 2px; border-radius: 0; background: none; color: var(--kx-mute); box-shadow: inset 0 -3px 0 transparent; }
.kx-tg[data-look="line"] .kx-tabs button[aria-selected="true"] { color: var(--kx-ink); box-shadow: inset 0 -3px 0 var(--primary); }
.kx-tg[data-look="boxed"] .kx-tabs { gap: 4px; margin-bottom: 0; }
.kx-tg[data-look="boxed"] .kx-tabs button { border-radius: 12px 12px 0 0; }
.kx-tg[data-look="boxed"] .kx-tabs button[aria-selected="true"] { background: #FFFFFF; color: var(--kx-ink); box-shadow: inset 0 2px 0 var(--primary); }
.kx-tg[data-look="boxed"] .kx-tg-panels { padding: 16px; border-radius: 0 16px 16px 16px; background: #FFFFFF; box-shadow: 0 10px 28px -20px rgba(18, 23, 53, .35), inset 0 0 0 1px var(--kx-line); }
.kx-tg[data-look="stack"] .kx-tabs { display: none; }
.kx-tg[data-look="stack"] .kx-tg-p[hidden] { display: grid; } .kx-tg[data-look="stack"] .kx-tg-p + .kx-tg-p { margin-top: 22px; } .kx-tg[data-look="stack"].is-tabs .kx-tg-h { display: block; }
@container (min-width: 620px) {
	.kx-tg[data-look="side"] .kx-tg-wrap { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 18px; }
	.kx-tg[data-look="side"] .kx-tabs { flex-direction: column; align-items: stretch; margin: 0; }
	.kx-tg[data-look="side"] .kx-tabs[hidden] { display: none; }
	.kx-tg[data-look="side"] .kx-tabs button { border-radius: 10px; text-align: left; }
}

/* --- ranking: rows · cards · big numbers · compact · two columns --- */
.kx-rk-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kx-rk-i { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; }
.kx-rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--kx-soft); color: var(--kx-ink); font-size: .8rem; font-weight: 800; }
.kx-rk-i:nth-child(-n+3) .kx-rank { background: var(--kx-badge, #B42318); color: #FFFFFF; }
.kx-rk[data-look="cards"] .kx-rk-list { grid-template-columns: repeat(var(--kx-cols, 2), minmax(0, 1fr)); gap: 14px; }
@container (min-width: 520px) { .kx-rk[data-look="cards"] .kx-rk-list { --kx-cols: 3; } }
@container (min-width: 760px) { .kx-rk[data-look="cards"] .kx-rk-list { --kx-cols: 5; } }
.kx-rk[data-look="cards"] .kx-rk-i { position: relative; display: block; }
.kx-rk[data-look="cards"] .kx-rk-i .kx-p { grid-template-columns: minmax(0, 1fr); }
.kx-rk[data-look="cards"] .kx-rk-i .kx-pi { grid-row: auto; border-radius: 14px; }
.kx-rk[data-look="cards"] .kx-rank { position: absolute; left: 8px; top: 8px; z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.kx-rk[data-look="big"] .kx-rk-i { grid-template-columns: 56px minmax(0, 1fr); }
.kx-rk[data-look="big"] .kx-rank, .kx-rk[data-look="big"] .kx-rk-i:nth-child(-n+3) .kx-rank { width: auto; height: auto; border-radius: 0; background: none; color: var(--kx-badge, #B42318); font-size: 2.4rem; line-height: 1; }
.kx-rk[data-look="compact"] .kx-pi, .kx-rk[data-look="compact"] .kx-pc { display: none; }
.kx-rk[data-look="compact"] .kx-rk-list { gap: 0; }
.kx-rk[data-look="compact"] .kx-rk-i { padding: 6px 0; border-bottom: 1px solid var(--kx-line); }
.kx-rk[data-look="compact"] .kx-rk-i .kx-p { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
@container (min-width: 560px) { .kx-rk[data-look="two"] .kx-rk-list { grid-template-columns: 1fr 1fr; column-gap: 22px; } }

/* --- featured + list + more: large left · large right · large on top · dark band · minimal --- */
.kx-fl { display: grid; gap: 18px; }
@container (min-width: 560px) { .kx-fl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .kx-sc[data-look="right"] .kx-fl-main { order: 2; } }
.kx-fl-main .kx-pi { aspect-ratio: 4 / 3; } .kx-fl-main .kx-pn { font-size: 1.15rem; }
.kx-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kx-fl-side { display: grid; align-content: start; gap: 10px; }
.kx-sc[data-look="top"] .kx-fl { grid-template-columns: minmax(0, 1fr); } .kx-sc[data-look="top"] .kx-fl-main .kx-pi { aspect-ratio: 21 / 9; }
@container (min-width: 560px) { .kx-sc[data-look="top"] .kx-rows { grid-template-columns: 1fr 1fr; column-gap: 18px; } }
.kx-sc[data-look="dark"] { padding: 20px; border-radius: 22px; background: linear-gradient(140deg, #0E3B3F, #0B1F24); color: #FFFFFF; }
.kx-sc[data-look="dark"] .kx-bt h2, .kx-sc[data-look="dark"] .kx-pn a, .kx-sc[data-look="dark"] .kx-pp.is-plain b { color: #FFFFFF; }
.kx-sc[data-look="dark"] .kx-pc, .kx-sc[data-look="dark"] .kx-pp s { color: #CFE7E3; }
.kx-sc[data-look="dark"] .kx-pp b, .kx-sc[data-look="dark"] .kx-more, .kx-sc[data-look="dark"] .kx-bt h2 i { color: #FFD84D; }
.kx-sc[data-look="minimal"] .kx-rows li { padding-bottom: 10px; border-bottom: 1px solid var(--kx-line); } .kx-sc[data-look="minimal"] .kx-rows .kx-p { grid-template-columns: minmax(0, 1fr); }

/* --- random products: list · cards · scroll · one large · minimal (the pool waits in a <template>) --- */
.kx-rand:not([data-look]) .kx-grid { --kx-cols: 1; gap: 12px; }
@container (min-width: 520px) { .kx-rand:not([data-look]) .kx-grid { --kx-cols: 2; } }
.kx-rand:not([data-look]) .kx-p { grid-template-columns: 64px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.kx-rand:not([data-look]) .kx-pi { grid-row: span 3; border-radius: 10px; }
.kx-rand:not([data-look]) .kx-badge { display: none; }

/* --- brand logos: tiles · one under another · logos only · round · cards with a note --- */
.kx-logos { display: grid; grid-template-columns: repeat(var(--kx-lcols, 3), minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
@container (min-width: 560px) { .kx-lc-4, .kx-lc-5, .kx-lc-6 { --kx-lcols: 4; } }
@container (min-width: 760px) { .kx-lc-5 { --kx-lcols: 5; } .kx-lc-6 { --kx-lcols: 6; } }
@container (max-width: 259px) { .kx-logos { --kx-lcols: 2; } }
.kx-logos li { position: relative; min-width: 0; }
.kx-logos a, .kx-logo-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; height: 100%; padding: 10px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--kx-line); color: var(--kx-ink); font-weight: 700; font-size: .85rem; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.kx-logos a:hover { box-shadow: inset 0 0 0 2px var(--primary); }
.kx-logo-img { max-width: 100%; max-height: 44px; object-fit: contain; }
.kx-logo-t small { display: block; color: var(--kx-mute); font-weight: 400; font-size: .75rem; }
.kx-brands:not([data-look="cards"]):not([data-look="column"]) .kx-logo-t small { display: none; }
.kx-brands[data-look="column"] .kx-logos { --kx-lcols: 1; }
.kx-brands[data-look="column"] .kx-logos a, .kx-brands[data-look="column"] .kx-logo-box { flex-direction: row; justify-content: flex-start; min-height: 56px; text-align: left; }
.kx-brands[data-look="column"] .kx-logo-img { width: 40px; max-height: 40px; }
.kx-brands[data-look="logos"] .kx-logos a, .kx-brands[data-look="logos"] .kx-logo-box { background: none; box-shadow: none; }
.kx-brands[data-look="logos"] .kx-logo-img { filter: grayscale(1); opacity: .75; transition: filter 160ms, opacity 160ms; }
.kx-brands[data-look="logos"] a:hover .kx-logo-img { filter: none; opacity: 1; }
.kx-brands[data-look="logos"] .kx-logo-img + .kx-logo-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kx-brands[data-look="round"] .kx-logos a, .kx-brands[data-look="round"] .kx-logo-box { aspect-ratio: 1; border-radius: 50%; }
.kx-brands[data-look="cards"] .kx-logos a, .kx-brands[data-look="cards"] .kx-logo-box { align-items: flex-start; min-height: 96px; padding: 14px; text-align: left; box-shadow: 0 1px 0 rgba(18, 23, 53, .06), 0 10px 28px -20px rgba(18, 23, 53, .35); }
@media (prefers-reduced-motion: reduce) { .kx-more i, .kx-brands[data-look="logos"] .kx-logo-img { transition: none; } }

/* 3.5.4 (HANDOFF 19.9): a product page's zones on phones keep their order — pictures, the details, the right zone */
@media (max-width: 767.98px) { .row.kx-zones.kx-zones--product { grid-template-areas: "l" "c" "r"; } }

/* ======================= 3.5.4 (HANDOFF 19.9): the blocks of Kumo Single Product Builder =======================
   Each look is data-look on the block (.cms-<type>); the first look = no attribute. Colours of the buy box: --kx-box
   (its background), --kx-buy (the main button), --kx-tier (the price step of the quantity chosen). */
.kx-sp-h { margin: 0 0 12px; font-size: 1.15rem; font-weight: 800; color: var(--dark, #16191F); }
.kx-nodata { margin: 0; padding: 14px 16px; border-radius: 12px; color: #4A5072; font-size: .875rem; background: repeating-linear-gradient(135deg, rgba(43, 59, 224, .06) 0 10px, rgba(43, 59, 224, .12) 10px 20px); box-shadow: inset 0 0 0 1.5px rgba(43, 59, 224, .25); }
.kx-stars { color: #8A5A00; letter-spacing: 1px; }
/* a product page block the product has nothing for leaves no gap (only these: an empty new Text block must stay clickable) */
:is([class*="cms-product-"], .cms-related-products, .cms-shipping-info, .cms-sales-contact, .cms-share-links).cms-block:empty { display: none; }

/* --- name and price: plain · centred · big price · card · compact --- */
.kx-title-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 6px; color: #5B6170; font-size: .85rem; }
.kx-title-cat { color: var(--primary); font-weight: 700; }
.kx-title-h { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.25; }
.kx-title-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; font-size: .9rem; }
.kx-title-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 12px 0 0; }
.kx-title-price b { color: #B42318; font-size: 1.9rem; line-height: 1; } .kx-title-price s { color: #5B6170; } .kx-title-price span { flex-basis: 100%; color: #5B6170; font-size: .85rem; }
.kx-title-flash { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 10px 0 0; padding: 6px 10px; border-radius: 12px; background: #FDECEA; color: #8A1C12; font-weight: 700; }
.kx-title-flash > i { color: #B42318; }
.kx-title-flash .kx-cd b { min-width: 30px; height: 26px; font-size: .85rem; }
[data-kx-cd-box].is-over .kx-cd, [data-kx-cd-box].is-over .kx-cd-l { display: none; } [data-kx-cd-box].is-over .kx-over { display: inline; }
.kx-title-sum { margin: 12px 0 0; }
.cms-product-title[data-look="center"] .kx-title { text-align: center; } .cms-product-title[data-look="center"] .kx-title-meta, .cms-product-title[data-look="center"] .kx-title-rate, .cms-product-title[data-look="center"] .kx-title-price, .cms-product-title[data-look="center"] .kx-title-flash { justify-content: center; }
.cms-product-title[data-look="big"] .kx-title-price b { font-size: clamp(2.2rem, 4vw, 3rem); }
.cms-product-title[data-look="big"] .kx-title-h { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.cms-product-title[data-look="card"] .kx-title { padding: 18px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(18, 23, 53, .06), 0 10px 28px -20px rgba(18, 23, 53, .35); }
.cms-product-title[data-look="compact"] .kx-title-h { font-size: 1.3rem; } .cms-product-title[data-look="compact"] .kx-title-price b { font-size: 1.35rem; } .cms-product-title[data-look="compact"] .kx-title-sum { display: none; }

/* --- buy box: plain (as in 3.5.3) · card · colour band · compact · full-width buttons --- */
.kx-status { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: #12805C; font-weight: 700; font-size: .9rem; }
.kx-tiers { width: 100%; margin: 12px 0 0; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.kx-tiers th, .kx-tiers td { padding: 8px 10px; border-bottom: 1px solid #E7E1D6; text-align: left; }
.kx-tiers thead th { color: #5B6170; font-size: .8rem; font-weight: 700; }
.kx-tiers td { font-weight: 700; }
.kx-tiers tr[aria-current="true"] > * { background: var(--kx-tier, #FFF4D6); }
.kx-qty { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 12px; margin: 14px 0 0; }
.kx-qty-l { font-weight: 700; }
.kx-qty-c { display: inline-flex; align-items: stretch; justify-self: start; border-radius: 12px; box-shadow: inset 0 0 0 1.5px #DDD7CB; overflow: hidden; }
.kx-qty-b { display: grid; place-items: center; width: 44px; min-height: 44px; border: 0; background: #F1EEE7; color: var(--dark, #16191F); cursor: pointer; }
.kx-qty-b:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.kx-qty-i { width: 96px; border: 0; background: #FFFFFF; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.kx-qty-i::-webkit-outer-spin-button, .kx-qty-i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kx-qty-min { grid-column: 2; color: #5B6170; }
.kx-est { grid-column: 1 / -1; margin: 4px 0 0; } .kx-est b { font-size: 1.15rem; } .kx-est small { color: #5B6170; }
.kx-buy-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.kx-buy-btns .sk-btn { min-height: 48px; }
.kx-buy-main, .kx-sticky-b { background: var(--kx-buy, var(--primary)); border-color: var(--kx-buy, var(--primary)); color: var(--primary-inverse, #FFFFFF); }
.kx-no-options .sk-product-options { display: none; }
.cms-product-buy-box[data-look="card"] .sk-product-info { padding: 18px; border-radius: 18px; background: var(--kx-box, #FFFFFF); box-shadow: 0 1px 0 rgba(18, 23, 53, .06), 0 10px 28px -20px rgba(18, 23, 53, .35); }
.cms-product-buy-box[data-look="tint"] .sk-product-info { padding: 18px; border-radius: 18px; background: var(--kx-box, #EEF6F4); box-shadow: inset 4px 0 0 var(--kx-buy, var(--primary)); }
.cms-product-buy-box[data-look="compact"] .sk-product-info { font-size: .9rem; } .cms-product-buy-box[data-look="compact"] .kx-tiers th, .cms-product-buy-box[data-look="compact"] .kx-tiers td { padding: 5px 8px; }
.cms-product-buy-box[data-look="compact"] .kx-buy-btns .sk-btn { min-height: 42px; }
.cms-product-buy-box[data-look="full"] .kx-buy-btns { flex-direction: column; } .cms-product-buy-box[data-look="full"] .kx-buy-btns .sk-btn { width: 100%; min-height: 56px; justify-content: center; font-size: 1.05rem; }
.cms-product-buy-box[data-look="full"] .kx-qty { grid-template-columns: 1fr; } .cms-product-buy-box[data-look="full"] .kx-qty-c { justify-self: stretch; } .cms-product-buy-box[data-look="full"] .kx-qty-i { flex: 1; } .cms-product-buy-box[data-look="full"] .kx-qty-min { grid-column: 1; }
/* the quote request */
.kx-quote { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(10, 12, 30, .5); }
.kx-quote::backdrop { background: rgba(10, 12, 30, .55); }
.kx-quote-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: #FFFFFF; border-bottom: 1px solid #E7E1D6; }
.kx-quote-h h2 { margin: 0; font-size: 1.15rem; }
.kx-quote-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #F1EEE7; cursor: pointer; }
.kx-quote .kf { padding: 16px 18px 18px; }
.kx-quote-list { padding: 14px 18px 0; } .kx-quote-list h3 { margin: 0 0 8px; font-size: 1rem; }
.kx-quote-list ul { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.kx-quote-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #F7F5F0; }
.kx-quote-list li button, .kx-quote-clear { min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--primary); font-weight: 700; text-decoration: underline; cursor: pointer; }
/* the bar at the bottom of phones */
.kx-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; align-items: center; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #FFFFFF; box-shadow: 0 -8px 24px -12px rgba(18, 23, 53, .35); transform: translateY(0); transition: transform 200ms ease; }
.kx-sticky[hidden] { display: flex; transform: translateY(110%); visibility: hidden; }
.kx-sticky img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.kx-sticky-t { display: grid; flex: 1; min-width: 0; } .kx-sticky-t b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .kx-sticky-t span { color: #B42318; font-weight: 700; }
.kx-sticky-b { min-height: 48px; background: var(--kx-buy, var(--primary)); border-color: var(--kx-buy, var(--primary)); }
body.has-kx-sticky { padding-bottom: 96px; }
@media (min-width: 768px) { .kx-sticky { display: none !important; } body.has-kx-sticky { padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .kx-sticky { transition: none; } }

/* --- gallery: small pictures below (as in 3.5.3) · on the side · two columns · one at a time · one under another --- */
.kx-gal-all { display: none; margin: 0; padding: 0; list-style: none; }
.kx-gal-all img { width: 100%; border-radius: 14px; display: block; }
.cms-product-gallery[data-look="grid"] .sk-product-gallery, .cms-product-gallery[data-look="stack"] .sk-product-gallery { display: none; }
.cms-product-gallery[data-look="grid"] .kx-gal-all { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cms-product-gallery[data-look="stack"] .kx-gal-all { display: grid; gap: 10px; }
@media (min-width: 768px) {
	.cms-product-gallery[data-look="side"] .sk-product-gallery { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: start; }
	.cms-product-gallery[data-look="side"] .sk-product-main { grid-column: 2; grid-row: 1; }
	.cms-product-gallery[data-look="side"] .sk-product-thumbs { grid-column: 1; grid-row: 1; flex-direction: column; margin: 0; }
}
.cms-product-gallery[data-look="dots"] .sk-product-thumbs { justify-content: center; gap: 6px; }
.cms-product-gallery[data-look="dots"] .sk-product-thumb { width: 24px; height: 24px; padding: 7px; border-radius: 50%; background: none; box-shadow: none; }
.cms-product-gallery[data-look="dots"] .sk-product-thumb img { display: none; }
.cms-product-gallery[data-look="dots"] .sk-product-thumb::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background: #C9C3B6; }
.cms-product-gallery[data-look="dots"] .sk-product-thumb.is-active::before { background: var(--primary); }

/* --- prices by quantity (a block of its own): table · cards · steps in a bar · compact · list --- */
.kx-tier-note { margin: 8px 0 0; color: #5B6170; font-size: .85rem; }
.cms-product-tiers[data-look="cards"] .kx-tiers thead { display: none; }
.cms-product-tiers[data-look="cards"] .kx-tiers tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.cms-product-tiers[data-look="cards"] .kx-tiers tr { display: grid; padding: 12px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #E7E1D6; }
.cms-product-tiers[data-look="cards"] .kx-tiers th, .cms-product-tiers[data-look="cards"] .kx-tiers td { padding: 0; border: 0; background: none; }
.cms-product-tiers[data-look="cards"] .kx-tiers td { font-size: 1.2rem; color: #B42318; }
.cms-product-tiers[data-look="bar"] .kx-tiers thead { display: none; }
.cms-product-tiers[data-look="bar"] .kx-tiers tbody { display: flex; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px #E7E1D6; }
.cms-product-tiers[data-look="bar"] .kx-tiers tr { display: grid; flex: 1; text-align: center; } .cms-product-tiers[data-look="bar"] .kx-tiers tr + tr { border-left: 1px solid #E7E1D6; }
.cms-product-tiers[data-look="bar"] .kx-tiers th, .cms-product-tiers[data-look="bar"] .kx-tiers td { border: 0; text-align: center; }
.cms-product-tiers[data-look="compact"] .kx-tiers th, .cms-product-tiers[data-look="compact"] .kx-tiers td { padding: 4px 6px; font-size: .85rem; }
.cms-product-tiers[data-look="list"] .kx-tiers thead { display: none; } .cms-product-tiers[data-look="list"] .kx-tiers tr { display: flex; justify-content: space-between; } .cms-product-tiers[data-look="list"] .kx-tiers th, .cms-product-tiers[data-look="list"] .kx-tiers td { border-bottom: 1px dashed #E7E1D6; }

/* --- highlights: list · icons in a grid · cards · chips · numbered --- */
.kx-hl { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: hl; }
.kx-hl li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; counter-increment: hl; }
.kx-hl i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #EEF6F4; color: #0E5E6F; }
.kx-hl span { display: grid; } .kx-hl small { color: #5B6170; font-size: .85rem; }
.cms-product-highlights[data-look="grid"] .kx-hl { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); text-align: center; }
.cms-product-highlights[data-look="grid"] .kx-hl li { grid-template-columns: 1fr; justify-items: center; }
.cms-product-highlights[data-look="grid"] .kx-hl i { width: 48px; height: 48px; border-radius: 50%; font-size: 1.2rem; }
.cms-product-highlights[data-look="cards"] .kx-hl { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.cms-product-highlights[data-look="cards"] .kx-hl li { padding: 14px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(18, 23, 53, .06), 0 10px 28px -20px rgba(18, 23, 53, .35); }
.cms-product-highlights[data-look="chips"] .kx-hl { display: flex; flex-wrap: wrap; gap: 8px; }
.cms-product-highlights[data-look="chips"] .kx-hl li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; background: #EEF6F4; }
.cms-product-highlights[data-look="chips"] .kx-hl i { width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF; } .cms-product-highlights[data-look="chips"] .kx-hl small { display: none; }
.cms-product-highlights[data-look="numbered"] .kx-hl i { display: none; }
.cms-product-highlights[data-look="numbered"] .kx-hl li::before { content: counter(hl, decimal-leading-zero); color: var(--primary); font-weight: 800; font-size: 1.2rem; }

/* --- specs: table · two columns · striped · lines between · cards --- */
.kx-specs { display: grid; margin: 0; }
.kx-specs > div { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid #E7E1D6; }
.kx-specs dt { color: #5B6170; font-weight: 700; } .kx-specs dd { margin: 0; }
@media (min-width: 768px) { .cms-product-specs[data-look="two"] .kx-specs { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.cms-product-specs[data-look="striped"] .kx-specs > div { padding: 9px 12px; border: 0; } .cms-product-specs[data-look="striped"] .kx-specs > div:nth-child(odd) { background: #F7F5F0; border-radius: 8px; }
.cms-product-specs[data-look="lines"] .kx-specs > div { grid-template-columns: 1fr; gap: 2px; }
.cms-product-specs[data-look="cards"] .kx-specs { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.cms-product-specs[data-look="cards"] .kx-specs > div { grid-template-columns: 1fr; gap: 2px; padding: 12px; border: 0; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #E7E1D6; }

/* --- reviews (entered by the shop): list · cards · big score · quotes · compact --- */
.kx-rev-score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; } .kx-rev-score b { font-size: 1.6rem; }
.kx-revs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kx-revs figure { margin: 0; padding-bottom: 12px; border-bottom: 1px solid #E7E1D6; }
.kx-revs .kx-stars { margin: 0; } .kx-revs blockquote { margin: 4px 0; }
.kx-revs figcaption { font-weight: 700; font-size: .9rem; } .kx-revs figcaption small { margin-left: 6px; color: #5B6170; font-weight: 400; }
.cms-product-reviews[data-look="cards"] .kx-revs { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cms-product-reviews[data-look="cards"] .kx-revs figure { height: 100%; padding: 14px; border: 0; border-radius: 14px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(18, 23, 53, .06), 0 10px 28px -20px rgba(18, 23, 53, .35); }
.cms-product-reviews[data-look="score"] .kx-rev-score { display: grid; justify-items: center; padding: 18px; border-radius: 18px; background: #FFF8E6; text-align: center; } .cms-product-reviews[data-look="score"] .kx-rev-score b { font-size: 3rem; line-height: 1; }
.cms-product-reviews[data-look="quotes"] .kx-revs blockquote { font-size: 1.1rem; font-style: italic; } .cms-product-reviews[data-look="quotes"] .kx-revs blockquote::before { content: "“"; color: var(--primary); font-size: 2rem; line-height: 0; vertical-align: -.4em; margin-right: 4px; }
.cms-product-reviews[data-look="compact"] .kx-revs { gap: 6px; } .cms-product-reviews[data-look="compact"] .kx-revs figure { padding-bottom: 6px; font-size: .9rem; } .cms-product-reviews[data-look="compact"] .kx-revs blockquote { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- video (loads when played): plain · rounded · shadow · frame · dark band --- */
.kx-vid { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #11142B; }
.kx-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kx-vid-play { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; width: 100%; padding: 16px; border: 0; background: #11142B; color: #FFFFFF; cursor: pointer; }
.kx-vid-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.kx-vid-i { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #FF3D3D; font-size: 1.4rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.kx-vid-t { position: relative; display: grid; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); } .kx-vid-t small { font-weight: 400; opacity: .9; }
.kx-vid-play:focus-visible { outline: 3px solid #FFD84D; outline-offset: -3px; }
.cms-product-video[data-look="round"] .kx-vid { border-radius: 18px; }
.cms-product-video[data-look="shadow"] .kx-vid { border-radius: 14px; box-shadow: 0 24px 48px -20px rgba(18, 23, 53, .55); }
.cms-product-video[data-look="frame"] .kx-vid { border-radius: 14px; box-shadow: 0 0 0 8px #FFFFFF, 0 0 0 9px #E7E1D6; }
.cms-product-video[data-look="dark"] .kx-vid-box { padding: 20px; border-radius: 22px; background: #11142B; } .cms-product-video[data-look="dark"] .kx-sp-h { color: #FFFFFF; } .cms-product-video[data-look="dark"] .kx-vid { border-radius: 12px; }
@media (prefers-reduced-motion: no-preference) { .kx-vid-play:hover .kx-vid-i { transform: scale(1.06); } .kx-vid-i { transition: transform 160ms; } }

/* --- files: list · cards · buttons · compact · icons in a grid --- */
.kx-files { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kx-files a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #E7E1D6; color: var(--dark, #16191F); text-decoration: none; font-weight: 700; }
.kx-files a:hover { box-shadow: inset 0 0 0 2px var(--primary); } .kx-files i { color: #B42318; font-size: 1.4rem; }
.kx-files span { display: grid; } .kx-files small { color: #5B6170; font-weight: 400; }
.cms-product-files[data-look="cards"] .kx-files { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .cms-product-files[data-look="cards"] .kx-files a { min-height: 80px; box-shadow: 0 1px 0 rgba(18, 23, 53, .06), 0 10px 28px -20px rgba(18, 23, 53, .35); }
.cms-product-files[data-look="buttons"] .kx-files { display: flex; flex-wrap: wrap; } .cms-product-files[data-look="buttons"] .kx-files a { border-radius: 999px; background: var(--primary); color: var(--primary-inverse, #FFFFFF); box-shadow: none; } .cms-product-files[data-look="buttons"] .kx-files i, .cms-product-files[data-look="buttons"] .kx-files small { color: inherit; }
.cms-product-files[data-look="compact"] .kx-files { gap: 0; } .cms-product-files[data-look="compact"] .kx-files a { min-height: 40px; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid #E7E1D6; }
.cms-product-files[data-look="grid"] .kx-files { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .cms-product-files[data-look="grid"] .kx-files a { flex-direction: column; justify-content: center; text-align: center; min-height: 120px; } .cms-product-files[data-look="grid"] .kx-files i { font-size: 2rem; }

/* --- bought together / related products: the card of the product groups --- */
.kx-tog-box, .kx-rev-box, .kx-ship-box, .kx-con-box, .kx-faq-box, .kx-hl-box, .kx-spec-box, .kx-tier-box, .kx-file-box, .kx-share-box, .kx-vid-box { container-type: inline-size; }
.cms-product-together[data-look="list"] .kx-grid, .cms-product-together[data-look="compact"] .kx-grid, .cms-product-together[data-look="minimal"] .kx-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cms-product-together[data-look="list"] .kx-p, .cms-product-together[data-look="compact"] .kx-p { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.cms-product-together[data-look="list"] .kx-pi, .cms-product-together[data-look="compact"] .kx-pi { grid-row: span 3; border-radius: 10px; }
.cms-product-together[data-look="compact"] .kx-pc, .cms-product-together[data-look="compact"] .kx-badge { display: none; }
.cms-product-together[data-look="cards"] .kx-p { padding: 10px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(18, 23, 53, .06), 0 10px 28px -20px rgba(18, 23, 53, .35); }
.cms-product-together[data-look="minimal"] .kx-pi { display: none; } .cms-product-together[data-look="minimal"] .kx-p { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; border-bottom: 1px solid #E7E1D6; }
.cms-related-products[data-look="scroll"] .sk-products-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 6px; }
.cms-related-products[data-look="scroll"] .sk-products-grid > * { flex: 0 0 min(240px, 70%); scroll-snap-align: start; }
.cms-related-products[data-look="list"] .sk-products-grid, .cms-related-products[data-look="compact"] .sk-products-grid { grid-template-columns: minmax(0, 1fr) !important; }
.cms-related-products[data-look="list"] .sk-product-card, .cms-related-products[data-look="compact"] .sk-product-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; }
.cms-related-products[data-look="compact"] .sk-product-card { grid-template-columns: 56px minmax(0, 1fr); } .cms-related-products[data-look="compact"] .sk-product-excerpt, .cms-related-products[data-look="compact"] .sk-product-actions { display: none; }
@media (min-width: 768px) { .cms-related-products[data-look="big"] .sk-products-grid { grid-template-columns: 1.4fr 1fr 1fr !important; } .cms-related-products[data-look="big"] .sk-product-card:first-child { grid-row: span 2; } }

/* --- shipping and payment: list · cards · in a row · big icons · plain --- */
.kx-ship { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kx-ship li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; }
.kx-ship i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #EEF3FF; color: #1B3A8C; }
.kx-ship span { display: grid; } .kx-ship small { color: #5B6170; }
.cms-shipping-info[data-look="cards"] .kx-ship { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .cms-shipping-info[data-look="cards"] .kx-ship li { padding: 14px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #E7E1D6; }
.cms-shipping-info[data-look="inline"] .kx-ship { display: flex; flex-wrap: wrap; gap: 10px 24px; } .cms-shipping-info[data-look="inline"] .kx-ship li { grid-template-columns: 24px auto; } .cms-shipping-info[data-look="inline"] .kx-ship i { width: 24px; height: 24px; background: none; }
.cms-shipping-info[data-look="icons"] .kx-ship { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); text-align: center; } .cms-shipping-info[data-look="icons"] .kx-ship li { grid-template-columns: 1fr; justify-items: center; } .cms-shipping-info[data-look="icons"] .kx-ship i { width: 52px; height: 52px; border-radius: 50%; font-size: 1.3rem; }
.cms-shipping-info[data-look="plain"] .kx-ship i { display: none; } .cms-shipping-info[data-look="plain"] .kx-ship li { grid-template-columns: 1fr; padding-bottom: 8px; border-bottom: 1px solid #E7E1D6; }

/* --- sales contact: card · plain · colour band · compact · round photo --- */
.kx-con-who { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.kx-con-who img, .kx-con-m { flex: none; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.kx-con-m { display: grid; place-items: center; background: #0E5E6F; color: #FFFFFF; font-weight: 800; }
.kx-con-who span { display: grid; } .kx-con-who small { color: #5B6170; }
.kx-con-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .kx-con-btns .sk-btn { min-height: 44px; }
.kx-con-line { background: #06C755; border-color: #06C755; color: #FFFFFF; }
.cms-sales-contact:not([data-look]) .kx-con-box { padding: 16px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(18, 23, 53, .06), 0 10px 28px -20px rgba(18, 23, 53, .35); }
.cms-sales-contact[data-look="band"] .kx-con-box { padding: 16px; border-radius: 18px; background: #EEF6F4; box-shadow: inset 4px 0 0 #0E5E6F; }
.cms-sales-contact[data-look="compact"] .kx-con-who { margin-bottom: 8px; } .cms-sales-contact[data-look="compact"] .kx-con-btns .sk-btn { min-height: 36px; padding-top: 0; padding-bottom: 0; font-size: .875rem; }
.cms-sales-contact[data-look="round"] .kx-con-box { text-align: center; } .cms-sales-contact[data-look="round"] .kx-con-who { flex-direction: column; } .cms-sales-contact[data-look="round"] .kx-con-who img, .cms-sales-contact[data-look="round"] .kx-con-m { width: 72px; height: 72px; border-radius: 50%; } .cms-sales-contact[data-look="round"] .kx-con-btns { justify-content: center; }

/* --- share: icons · buttons · pills · round · text links --- */
.kx-share { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kx-share a, .kx-share button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: #F1EEE7; color: var(--dark, #16191F); font-weight: 700; text-decoration: none; cursor: pointer; }
.kx-share a:hover, .kx-share button:hover { background: #E7E1D6; }
.cms-share-links:not([data-look]) .kx-share span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cms-share-links:not([data-look]) .kx-share a, .cms-share-links:not([data-look]) .kx-share button { padding: 0; }
.cms-share-links[data-look="buttons"] .is-fb { background: #1877F2; color: #FFFFFF; } .cms-share-links[data-look="buttons"] .is-line { background: #06C755; color: #FFFFFF; } .cms-share-links[data-look="buttons"] .is-x { background: #0F1419; color: #FFFFFF; }
.cms-share-links[data-look="pills"] .kx-share a, .cms-share-links[data-look="pills"] .kx-share button { border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px #DDD7CB; }
.cms-share-links[data-look="round"] .kx-share a, .cms-share-links[data-look="round"] .kx-share button { width: 44px; padding: 0; border-radius: 50%; } .cms-share-links[data-look="round"] .kx-share span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cms-share-links[data-look="text"] .kx-share a, .cms-share-links[data-look="text"] .kx-share button { min-width: 0; min-height: 24px; padding: 0; background: none; color: var(--primary); text-decoration: underline; }

/* --- questions: lines · cards · filled · plus signs · minimal --- */
.kx-faq details { border-bottom: 1px solid #E7E1D6; }
.kx-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 0; font-weight: 700; cursor: pointer; list-style: none; }
.kx-faq summary::-webkit-details-marker { display: none; }
.kx-faq summary::after { content: "\f078"; font: var(--fa-font-solid); font-size: .8rem; color: #5B6170; transition: transform 160ms; }
.kx-faq details[open] summary::after { transform: rotate(180deg); }
.kx-faq-a { padding: 0 0 12px; color: #4A5072; }
.cms-product-faq[data-look="cards"] .kx-faq { display: grid; gap: 8px; } .cms-product-faq[data-look="cards"] .kx-faq details { padding: 0 14px; border: 0; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #E7E1D6; }
.cms-product-faq[data-look="filled"] .kx-faq { display: grid; gap: 6px; } .cms-product-faq[data-look="filled"] .kx-faq details { padding: 0 14px; border: 0; border-radius: 12px; background: #F1EEE7; }
.cms-product-faq[data-look="plus"] .kx-faq summary::after { content: "+"; font: 700 1.3rem/1 inherit; transform: none; } .cms-product-faq[data-look="plus"] .kx-faq details[open] summary::after { content: "−"; transform: none; }
.cms-product-faq[data-look="minimal"] .kx-faq details { border: 0; } .cms-product-faq[data-look="minimal"] .kx-faq summary { min-height: 36px; padding: 4px 0; } .cms-product-faq[data-look="minimal"] .kx-faq summary::after { display: none; }
@media (prefers-reduced-motion: reduce) { .kx-faq summary::after { transition: none; } }

/* 3.5.4 (HANDOFF 19.3, 19.4): "N found" with the conditions as chips; the results while new ones come */
.kx-result { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; color: #5B6170; font-size: .9rem; }
.kx-result:empty { display: none; }
.kx-result-n { color: var(--dark, #16191F); font-weight: 700; }
.kx-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px; background: #F1EEE7; color: var(--dark, #16191F); font-size: .8rem; font-weight: 700; text-decoration: none; }
.kx-chip:hover { background: #E7E1D6; color: var(--dark, #16191F); } .kx-chip i { font-size: .75em; }
.kx-clear-all { display: inline-flex; align-items: center; min-height: 30px; color: var(--primary); font-weight: 700; text-decoration: underline; }
[data-kx-loop].is-loading [data-kx-results] { opacity: .55; transition: opacity 120ms; }
@media (prefers-reduced-motion: reduce) { [data-kx-loop].is-loading [data-kx-results] { transition: none; } }

/* ======================= 3.5.4 (HANDOFF 19.4): post groups of Kumo Blog Builder, the banner, products seen lately ======================= */
.kx-post { display: grid; align-content: start; gap: 6px; min-width: 0; background: var(--kx-card-bg, transparent); }
.kx-post-i { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #E9E1D4, #D2C1A4); }
.kx-post-i img { width: 100%; height: 100%; object-fit: cover; }
.kx-post-c { color: var(--kx-link, var(--primary)); font-size: .75rem; font-weight: 800; }
.kx-post h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; } .kx-post h3 a { display: inline-block; min-height: 24px; color: var(--dark, #16191F); text-decoration: none; } .kx-post h3 a:hover { text-decoration: underline; }
.kx-post-s { margin: 0; color: #4A5072; font-size: .9rem; line-height: 1.7; }
.kx-post-m { margin: 0; color: #5B6170; font-size: .8rem; }
.kx-read { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--kx-link, var(--primary)); font-weight: 700; font-size: .875rem; text-decoration: none; }
.kx-post.is-big .kx-post-i { aspect-ratio: 21 / 10; } .kx-post.is-big h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); } .kx-post.is-big .kx-post-s { font-size: 1rem; }
.kx-b[data-hide~="img"] .kx-post-i, .kx-b[data-hide~="cat"] .kx-post-c, .kx-b[data-hide~="sum"] .kx-post-s, .kx-b[data-hide~="meta"] .kx-post-m, .kx-b[data-hide~="more"] .kx-read { display: none; }
.kx-pg .kx-grid, .kx-pf .kx-grid { gap: 18px; }
@container (min-width: 520px) { .kx-pc-1 { --kx-cols: 1; } .kx-pc-2, .kx-pc-3, .kx-pc-4 { --kx-cols: 2; } }
@container (min-width: 760px) { .kx-pc-3 { --kx-cols: 3; } .kx-pc-4 { --kx-cols: 4; } }
/* featured posts: one large · large + two · cards in a row · words on the picture · titles only */
.kx-pf:not([data-look]) .kx-grid { grid-template-columns: minmax(0, 1fr); } .kx-pf:not([data-look]) .kx-post:not(:first-child) { display: none; }
@container (min-width: 620px) { .kx-pf[data-look="split"] .kx-grid { grid-template-columns: 1.5fr 1fr; } .kx-pf[data-look="split"] .kx-post:first-child { grid-row: span 2; } }
.kx-pf[data-look="split"] .kx-post:nth-child(n+4) { display: none; } .kx-pf[data-look="split"] .kx-post:not(:first-child) .kx-post-s { display: none; }
.kx-pf[data-look="grid"] .kx-post.is-big .kx-post-i { aspect-ratio: 16 / 10; } .kx-pf[data-look="grid"] .kx-post.is-big h3 { font-size: 1.05rem; }
.kx-pf[data-look="overlay"] .kx-post, .kx-pg[data-look="overlay"] .kx-post { position: relative; min-height: 260px; padding: 16px; align-content: end; border-radius: 18px; overflow: hidden; color: #FFFFFF; isolation: isolate; }
.kx-pf[data-look="overlay"] .kx-post-i, .kx-pg[data-look="overlay"] .kx-post-i { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; border-radius: 0; }
.kx-pf[data-look="overlay"] .kx-post::before, .kx-pg[data-look="overlay"] .kx-post::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 12, 30, .1) 15%, rgba(10, 12, 30, .88)); }
.kx-pf[data-look="overlay"] .kx-post h3 a, .kx-pg[data-look="overlay"] .kx-post h3 a, .kx-pf[data-look="overlay"] .kx-post-s, .kx-pg[data-look="overlay"] .kx-post-s { color: #FFFFFF; }
.kx-pf[data-look="overlay"] .kx-post-c, .kx-pg[data-look="overlay"] .kx-post-c, .kx-pf[data-look="overlay"] .kx-read, .kx-pg[data-look="overlay"] .kx-read { color: #FFD84D; }
.kx-pf[data-look="overlay"] .kx-post-m, .kx-pg[data-look="overlay"] .kx-post-m { color: #D9DCEB; }
.kx-pf[data-look="minimal"] .kx-grid, .kx-pg[data-look="minimal"] .kx-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.kx-pf[data-look="minimal"] .kx-post, .kx-pg[data-look="minimal"] .kx-post { padding: 14px 0; border-top: 1px solid #E7E1D6; }
.kx-pf[data-look="minimal"] .kx-post-i, .kx-pg[data-look="minimal"] .kx-post-i, .kx-pf[data-look="minimal"] .kx-post-s { display: none; }
.kx-pf[data-look="minimal"] .kx-post.is-big h3 { font-size: 1.15rem; }
/* posts by group: card grid · cards on their side · words on the picture · minimal · magazine */
@container (min-width: 520px) { .kx-pg[data-look="side"] .kx-grid { grid-template-columns: minmax(0, 1fr); } .kx-pg[data-look="side"] .kx-post { grid-template-columns: 220px minmax(0, 1fr); column-gap: 18px; } .kx-pg[data-look="side"] .kx-post-i { grid-row: span 5; aspect-ratio: 4 / 3; } }
.kx-pg[data-look="minimal"] .kx-post { border-top: 3px solid var(--dark, #16191F); }
@container (min-width: 620px) { .kx-pg[data-look="magazine"] .kx-grid { grid-template-columns: 1.5fr 1fr; } .kx-pg[data-look="magazine"] .kx-post:first-child { grid-row: span 2; } .kx-pg[data-look="magazine"] .kx-post:first-child h3 { font-size: 1.45rem; } }
.kx-pg[data-look="magazine"] .kx-post:not(:first-child) .kx-post-s { display: none; }
/* list + read more: numbered · plain · small pictures · compact · cards */
.kx-plist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: pl; }
.kx-plist li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding-bottom: 12px; border-bottom: 1px solid #E7E1D6; counter-increment: pl; }
.kx-plist li::before { content: counter(pl, decimal-leading-zero); color: var(--kx-link, var(--primary)); font-weight: 800; }
.kx-plist span { display: grid; min-width: 0; } .kx-plist a { display: inline-block; min-height: 24px; color: var(--dark, #16191F); font-weight: 700; line-height: 1.4; text-decoration: none; } .kx-plist a:hover { text-decoration: underline; }
.kx-plist small { color: #5B6170; font-size: .78rem; }
.kx-plist-i { display: none; width: 64px; height: 48px; border-radius: 8px; object-fit: cover; }
.kx-pl[data-look="plain"] .kx-plist li { grid-template-columns: minmax(0, 1fr); } .kx-pl[data-look="plain"] .kx-plist li::before { display: none; }
.kx-pl[data-look="thumbs"] .kx-plist li { grid-template-columns: 64px minmax(0, 1fr); } .kx-pl[data-look="thumbs"] .kx-plist li::before { display: none; } .kx-pl[data-look="thumbs"] .kx-plist-i { display: block; }
.kx-pl[data-look="compact"] .kx-plist { gap: 4px; } .kx-pl[data-look="compact"] .kx-plist li { padding-bottom: 4px; border: 0; } .kx-pl[data-look="compact"] .kx-plist small { display: none; }
.kx-pl[data-look="cards"] .kx-plist li { padding: 12px; border: 0; border-radius: 14px; background: var(--kx-card-bg, #FFFFFF); box-shadow: 0 1px 0 rgba(18, 23, 53, .06), 0 10px 28px -20px rgba(18, 23, 53, .35); }
/* group + list + read more: large left · large right · large on top · dark band · minimal */
.kx-gl { display: grid; gap: 18px; }
@container (min-width: 620px) { .kx-gl { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .kx-pgl[data-look="right"] .kx-gl-main { order: 2; } }
.kx-gl-side { display: grid; align-content: start; gap: 10px; }
.kx-pgl[data-look="top"] .kx-gl { grid-template-columns: minmax(0, 1fr); }
.kx-pgl[data-look="dark"] { padding: 20px; border-radius: 22px; background: linear-gradient(140deg, #16191F, #2A2F3A); color: #FFFFFF; }
.kx-pgl[data-look="dark"] .kx-bt h2, .kx-pgl[data-look="dark"] .kx-post h3 a, .kx-pgl[data-look="dark"] .kx-plist a, .kx-pgl[data-look="dark"] .kx-post-s { color: #FFFFFF; }
.kx-pgl[data-look="dark"] .kx-post-c, .kx-pgl[data-look="dark"] .kx-read, .kx-pgl[data-look="dark"] .kx-more, .kx-pgl[data-look="dark"] .kx-plist li::before { color: #FFD84D; }
.kx-pgl[data-look="dark"] .kx-post-m, .kx-pgl[data-look="dark"] .kx-plist small { color: #C9CDD8; } .kx-pgl[data-look="dark"] .kx-plist li { border-color: rgba(255, 255, 255, .15); }
.kx-pgl[data-look="minimal"] .kx-post-i { display: none; } .kx-pgl[data-look="minimal"] .kx-plist li::before { display: none; } .kx-pgl[data-look="minimal"] .kx-plist li { grid-template-columns: minmax(0, 1fr); }
/* post categories: list · chips · cards · icons in a grid · in a row */
.kx-cats { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.kx-cats a { display: flex; align-items: center; gap: 8px; justify-content: space-between; min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--dark, #16191F); font-weight: 700; text-decoration: none; }
.kx-cats a span { flex: 1; } .kx-cats a:hover, .kx-cats a[aria-current] { background: #F1EEE7; color: var(--dark, #16191F); } .kx-cats small { color: #5B6170; font-weight: 400; }
.kx-pcat[data-look="chips"] .kx-cats, .kx-pcat[data-look="inline"] .kx-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.kx-pcat[data-look="chips"] .kx-cats a { min-height: 36px; border-radius: 999px; background: #F1EEE7; }
.kx-pcat[data-look="cards"] .kx-cats { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.kx-pcat[data-look="cards"] .kx-cats a { min-height: 64px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #E7E1D6; }
.kx-pcat[data-look="grid"] .kx-cats { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.kx-pcat[data-look="grid"] .kx-cats a { flex-direction: column; justify-content: center; min-height: 100px; text-align: center; border-radius: 14px; background: #F7F5F0; } .kx-pcat[data-look="grid"] .kx-cats a i { font-size: 1.6rem; color: var(--primary); } .kx-pcat[data-look="grid"] .kx-cats a span { flex: none; }
.kx-pcat[data-look="inline"] .kx-cats a { min-height: 24px; padding: 0; background: none; color: var(--primary); text-decoration: underline; } .kx-pcat[data-look="inline"] .kx-cats small { display: none; }
/* search posts (left zone) */
.kx-search { position: relative; }
.kx-search label { display: block; margin-bottom: 6px; font-weight: 700; }
.kx-search input[type="search"] { width: 100%; min-height: 46px; padding: 0 14px 0 40px; border: 0; border-radius: 14px; background: #FFFFFF; color: var(--dark, #16191F); box-shadow: inset 0 0 0 1.5px #DDD7CB; }
.kx-search input[type="search"]:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary); }
.kx-search .kx-s-ic { position: absolute; left: 14px; top: 44px; color: #5B6170; }
.kx-psearch-cats { margin-top: 14px; }
/* the banner: dark band · picture on the side · centred · words on the picture · minimal */
.kx-bn-in { position: relative; display: grid; gap: 16px; align-items: center; min-height: 200px; padding: 26px; border-radius: 22px; overflow: hidden; background: var(--kx-bn-bg, linear-gradient(140deg, #0E3B3F, #0B1F24)); color: #FFFFFF; isolation: isolate; }
.kx-bn-i { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.kx-bn-h { margin: 0 0 6px; color: #FFFFFF; font-size: clamp(1.35rem, 2.6vw, 1.75rem); } .kx-bn-p { margin: 0 0 14px; color: #E2EEEC; }
.kx-bn-b { justify-self: start; }
@container (min-width: 620px) { .kx-bn[data-look="side"] .kx-bn-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kx-bn[data-look="side"] .kx-bn-in { background: var(--kx-bn-bg, #F7F5F0); color: var(--dark, #16191F); } .kx-bn[data-look="side"] .kx-bn-i { position: static; z-index: 0; height: auto; aspect-ratio: 4 / 3; border-radius: 16px; opacity: 1; }
.kx-bn[data-look="side"] .kx-bn-h { color: var(--dark, #16191F); } .kx-bn[data-look="side"] .kx-bn-p { color: #4A5072; }
.kx-bn[data-look="center"] .kx-bn-in { justify-items: center; text-align: center; } .kx-bn[data-look="center"] .kx-bn-b { justify-self: center; }
.kx-bn[data-look="over"] .kx-bn-in { min-height: 300px; align-content: end; } .kx-bn[data-look="over"] .kx-bn-i { opacity: 1; } .kx-bn[data-look="over"] .kx-bn-in::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgba(10, 12, 30, .85)); }
.kx-bn[data-look="minimal"] .kx-bn-in { min-height: 0; padding: 18px 0; border-radius: 0; background: none; color: var(--dark, #16191F); border-top: 3px solid var(--dark, #16191F); } .kx-bn[data-look="minimal"] .kx-bn-i { display: none; } .kx-bn[data-look="minimal"] .kx-bn-h { color: var(--dark, #16191F); } .kx-bn[data-look="minimal"] .kx-bn-p { color: #4A5072; }
/* products seen lately: hidden until this browser has seen some */
.kx-b:has(> [data-kx-recent][hidden]) { display: none; }
.kx-recent[data-look="scroll"] .kx-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .kx-recent[data-look="scroll"] .kx-p { flex: 0 0 min(220px, 60%); scroll-snap-align: start; }
.kx-recent[data-look="list"] .kx-grid, .kx-recent[data-look="compact"] .kx-grid, .kx-recent[data-look="minimal"] .kx-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.kx-recent[data-look="list"] .kx-p, .kx-recent[data-look="compact"] .kx-p { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: center; } .kx-recent[data-look="list"] .kx-pi, .kx-recent[data-look="compact"] .kx-pi { grid-row: span 3; border-radius: 10px; }
.kx-recent[data-look="compact"] .kx-pc, .kx-recent[data-look="compact"] .kx-badge { display: none; }
.kx-recent[data-look="minimal"] .kx-pi { display: none; } .kx-recent[data-look="minimal"] .kx-p { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; border-bottom: 1px solid #E7E1D6; }

/* ===== 3.5.5 (HANDOFF 20.4): contact-only shops ================================================================ */
/* LINE buttons in LINE's own look (CI): #06C755, white logo and words, a black 8 % line between them, darker on pointing
   (10 %) and pressing (30 %). White on #06C755 is 2.26:1 — accepted by the owner (19/10/2026) to match LINE's CI: the
   button always has words, bold, at least 44 px, a dark focus ring. */
.kx-line { --kx-line-bg: #06C755; display: inline-flex; align-items: stretch; justify-content: center; gap: 0; min-height: 44px; padding: 0; overflow: hidden; border: 0; border-radius: var(--sk-radius-btn, 12px); background: var(--kx-line-bg); color: #FFFFFF; font-weight: 700; line-height: 1.2; text-decoration: none; }
a.kx-line, a.kx-line:hover, a.kx-line:focus, .sk-body a.kx-line, .sk-body a.kx-line:hover { color: #FFFFFF; text-decoration: none; }
.kx-line-ic { display: grid; place-items: center; flex: 0 0 auto; padding: 0 12px; border-right: 1px solid rgba(0, 0, 0, .08); font-size: 1.25em; }
.kx-line-t { display: flex; flex: 1; align-items: center; justify-content: center; padding: 0 14px; }
.kx-line:hover { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .1); } .kx-line:active { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .3); }
.kx-line:focus-visible { outline: 3px solid var(--sk-ink, #16191F); outline-offset: 2px; }
.sk-contact--line.kx-line { padding: 0; }
/* the button on a product card */
.kx-ask.kx-line { width: 100%; margin-top: 8px; font-size: .875rem; }
.sk-product-actions .kx-ask.kx-line { width: auto; margin-top: 0; }
/* a call button: the number on a computer, "Call now" on a phone (the name screen readers hear has the number) */
.kx-tel-now { display: none; }
@media (max-width: 767.98px) { .kx-tel-num { display: none; } .kx-tel-now { display: inline; } }
@container (max-width: 760px) { .kx-tel-num { display: none; } .kx-tel-now { display: inline; } }
/* floating buttons (computer): a round call button above LINE with words; the number beside it on pointing / focus */
.kx-float { position: fixed; right: 20px; bottom: 20px; z-index: 1030; display: grid; justify-items: end; gap: 10px; }
.kx-float.is-left { right: auto; left: 20px; justify-items: start; }
.kx-float-b { position: relative; display: flex; align-items: center; min-height: 52px; border-radius: 999px; font-weight: 800; text-decoration: none; box-shadow: 0 10px 26px -10px rgba(18, 23, 53, .5); }
.kx-float-b.kx-line { padding: 0; } .kx-float-b.kx-line .kx-line-ic { padding: 0 12px 0 16px; font-size: 1.35rem; } .kx-float-b.kx-line .kx-line-t { padding: 0 18px 0 12px; }
.kx-float-b.is-tel { justify-content: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; background: var(--sk-surface, #FFFFFF); color: var(--sk-ink, #16191F); box-shadow: inset 0 0 0 1.5px var(--sk-border, #D7DBE7), 0 10px 26px -10px rgba(18, 23, 53, .4); font-size: 1.25rem; }
a.kx-float-b.is-tel, a.kx-float-b.is-tel:hover { color: var(--sk-ink, #16191F); text-decoration: none; }
.kx-float-b.is-tel:focus-visible { outline: 3px solid var(--sk-ink, #16191F); outline-offset: 3px; }
.kx-float-tip { position: absolute; right: calc(100% + 10px); top: 50%; padding: 6px 12px; border-radius: 10px; background: var(--dark, #0F1E24); color: #FFFFFF; font-size: .9rem; font-weight: 700; white-space: nowrap; opacity: 0; transform: translate(6px, -50%); pointer-events: none; transition: opacity 140ms, transform 140ms; }
.kx-float.is-left .kx-float-tip { right: auto; left: calc(100% + 10px); transform: translate(-6px, -50%); }
.kx-float-b.is-tel:hover .kx-float-tip, .kx-float-b.is-tel:focus-visible .kx-float-tip { opacity: 1; transform: translate(0, -50%); }
/* the bar at the bottom of phones: "Call now" + LINE; the page keeps room for it */
.kx-bar { display: none; }
@media (max-width: 767.98px) {
  .kx-float { display: none; }
  .kx-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--sk-surface, #FFFFFF); box-shadow: 0 -8px 24px -12px rgba(18, 23, 53, .35); }
  .kx-bar-b { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px; font-weight: 800; text-decoration: none; }
  .kx-bar-b.is-tel, a.kx-bar-b.is-tel:hover { background: var(--primary, #2B3BE0); color: var(--sk-on-primary, #FFFFFF); text-decoration: none; }
  body:has(.kx-bar) { padding-bottom: 96px; }
}
/* not with the order bar of a product (it has its own buttons) */
body:has(.kx-sticky:not([hidden])) .kx-float, body:has(.kx-sticky:not([hidden])) .kx-bar, body.has-kx-sticky .kx-float, body.has-kx-sticky .kx-bar, body:has(.sk-product-sticky) .kx-bar { display: none; }
@media (prefers-reduced-motion: reduce) { .kx-float-tip { transition: none; } }
/* the colour of a product category (Products › Settings): tiles, the category on product cards, photos on the colour.
   A theme sets --kx-tone / --kx-tone-ink; the ink reads at 4.5:1 or more on each tone */
.kx-tone-mint { --kx-tone: #D8F1E4; --kx-tone-ink: #14603E; } .kx-tone-peach { --kx-tone: #FFE1CF; --kx-tone-ink: #8A3A0E; } .kx-tone-lilac { --kx-tone: #EAE2FF; --kx-tone-ink: #4C2C9E; }
.kx-tone-sky { --kx-tone: #D9E9FF; --kx-tone-ink: #1C4E92; } .kx-tone-butter { --kx-tone: #FFF0BF; --kx-tone-ink: #6B4E00; } .kx-tone-rose { --kx-tone: #FFDDE8; --kx-tone-ink: #8E1F48; }
[class*="kx-tone-"] .kx-pc, [class*="kx-tone-"] .sk-product-cat { display: inline-flex; align-items: center; gap: 6px; color: var(--kx-tone-ink); }
[class*="kx-tone-"] .kx-pc::before, [class*="kx-tone-"] .sk-product-cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kx-tone-ink); }
.kx-tone-photos[class*="kx-tone-"] .kx-pi, .kx-tone-photos[class*="kx-tone-"] .sk-product-media { background: var(--kx-tone); }
.kx-tone-photos[class*="kx-tone-"] .kx-pi img, .kx-tone-photos[class*="kx-tone-"] .sk-product-media img { mix-blend-mode: multiply; }
.sk-category-card[class*="kx-tone-"]:not(.has-image) { background: var(--kx-tone); color: var(--kx-tone-ink); }
.sk-category-card[class*="kx-tone-"]:not(.has-image) .sk-category-name, .sk-category-card[class*="kx-tone-"]:not(.has-image) .sk-category-count, .sk-category-card[class*="kx-tone-"]:not(.has-image) .sk-category-icon { color: var(--kx-tone-ink); }

/* ===== 3.5.5 (HANDOFF 20.5): a menu item opened as a grid (2–4 columns, an icon on each item) =============== */
#header .kx-mega-grid { display: grid; grid-template-columns: repeat(var(--kx-mega-cols, 3), minmax(0, 1fr)); gap: 4px 18px; }
#header .kx-mega-cols-2 { --kx-mega-cols: 2; } #header .kx-mega-cols-3 { --kx-mega-cols: 3; } #header .kx-mega-cols-4 { --kx-mega-cols: 4; }
#header .kx-mega-item { display: flex !important; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px !important; border-radius: 10px; border: 0 !important; white-space: normal; }
#header .kx-mega-item i { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: var(--kx-tone, color-mix(in srgb, var(--primary) 10%, transparent)); color: var(--kx-tone-ink, var(--primary)); font-size: 1rem; }
#header .kx-mega-item:hover, #header .kx-mega-item:focus-visible { background: color-mix(in srgb, var(--primary) 7%, transparent); }
#header .kx-mega-col .dropdown-mega-sub-title i { margin-right: 4px; color: var(--primary); }
@media (max-width: 991.98px) { #header .kx-mega-grid { grid-template-columns: minmax(0, 1fr); } }
/* seven items or more on the main menu: closer together so the row does not overflow */
@media (min-width: 992px) {
  #header .header-nav-main nav > ul:has(> li:nth-child(7)) > li > a { padding-left: .55rem !important; padding-right: .55rem !important; font-size: .95em; }
  #header .header-nav-main nav > ul:has(> li:nth-child(9)) > li > a { padding-left: .4rem !important; padding-right: .4rem !important; font-size: .9em; }
}

/* ===== 3.5.5 (HANDOFF 20.5): the divider — a line, or a picture repeated across; upside down when wanted ======= */
.kb-div { height: var(--kb-div-h, 24px); margin: 0; color: var(--sk-border, rgba(0, 0, 0, .15)); }
.kb-div.is-line { display: flex; align-items: center; } .kb-div.is-line::before { content: ""; flex: 1; height: 1px; background: currentColor; }
.kb-div.is-pattern { background: var(--kb-div-img) repeat-x center / auto 100%; }
.kb-div.is-flip { transform: scaleY(-1); }
.kx-rk-seen { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--kx-mute, #5B6170); font-size: .8rem; }