/**
 * Born Slippy Configurator.
 *
 * Enqueued rather than printed inline, because page builders strip or reorder
 * inline <style> inside shortcode output. Everything carries !important for the
 * same reason: builder resets are broad and load after plugin styles.
 *
 * The section is transparent throughout and holds its shape with hairlines
 * rather than fills, so it sits on whatever background the page gives it.
 */

.cf{
	--ink:#0A0A0A !important;
	--paper:transparent !important;
	--card:transparent !important;
	--open:transparent !important;
	--line:rgba(10,10,10,.13) !important;
	--soft:rgba(10,10,10,.55) !important;
	/* Text that sits ON the ink blocks: step bars, chips, view buttons, the
	   Next and Reserve buttons. Its own token on purpose. --paper is
	   transparent so the section inherits whatever the page is, and using it
	   for type turned every white label on black into invisible text. */
	--on-ink:#F7F5F2 !important;
	--gutter:clamp(20px,4.5vw,64px) !important;
	--r:12px !important;
	--r-sm:8px !important;
	--t:.4s !important;
	--e:cubic-bezier(.22,1,.36,1) !important;
	position:relative !important;
	background:transparent !important;
	color:var(--ink) !important;
}
.cf *,.cf *::before,.cf *::after{box-sizing:border-box !important}
.cf__wrap{padding:clamp(72px,12vh,140px) var(--gutter) !important}

.cf__head{max-width:1100px !important;margin-bottom:clamp(32px,5vh,56px) !important}
.cf .cf__title{margin:0 !important;font-size:clamp(28px,3.2vw,50px) !important;font-weight:800 !important;line-height:1 !important;letter-spacing:-.032em !important}
.cf .cf__lede{margin:clamp(14px,2vh,22px) 0 0 !important;max-width:52ch !important;font-size:clamp(14px,1.02vw,16px) !important;line-height:1.6 !important;color:var(--soft) !important}

.cf__grid{display:grid !important;grid-template-columns:1.05fr .95fr !important;gap:clamp(20px,2.4vw,40px) !important;align-items:start !important}

/* ---- viewer ---- */
.cf__viewer{position:sticky !important;top:clamp(60px,7vh,90px) !important;display:flex !important;flex-direction:column !important;gap:14px !important}
.cf__stage{position:relative !important;height:clamp(420px,72svh,860px) !important;overflow:hidden !important;background:transparent !important;
	border:0 !important;border-radius:0 !important;cursor:grab !important;touch-action:pan-y !important;user-select:none !important}
.cf__stage.is-drag{cursor:grabbing !important}
.cf__ground{position:absolute !important;inset:0 !important;z-index:0 !important;pointer-events:none !important;
	background:radial-gradient(52% 20% at 50% 92%,rgba(10,10,10,.10) 0%,rgba(10,10,10,0) 72%) !important}
.cf__frames{position:absolute !important;inset:0 !important;z-index:1 !important;pointer-events:none !important}
.cf__f{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:contain !important;display:block !important;
	padding:0 !important;opacity:0 !important;transition:opacity .16s linear !important;-webkit-user-drag:none !important}
.cf__f.is-on{opacity:1 !important}
.cf .cf__hint{position:absolute !important;left:0 !important;right:0 !important;bottom:clamp(12px,2vh,20px) !important;z-index:2 !important;margin:0 !important;text-align:center !important;
	font-size:9.5px !important;letter-spacing:.2em !important;text-transform:uppercase !important;color:var(--soft) !important;pointer-events:none !important;transition:opacity .5s !important}
.cf.is-touched .cf__hint{opacity:0 !important}

.cf__views{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:6px !important}
.cf button.cf__view-b{appearance:none !important;padding:11px 6px !important;border:1px solid var(--line) !important;border-radius:var(--r-sm) !important;
	background:transparent !important;color:var(--soft) !important;font-family:inherit !important;font-size:9.5px !important;font-weight:700 !important;
	letter-spacing:.16em !important;text-transform:uppercase !important;cursor:pointer !important;
	transition:background-color .25s var(--e),color .25s var(--e),border-color .25s var(--e) !important}
.cf button.cf__view-b:hover{border-color:var(--ink) !important;color:var(--ink) !important}
.cf button.cf__view-b.is-on{background:var(--ink) !important;border-color:var(--ink) !important;color:var(--on-ink) !important}
.cf button.cf__view-b:focus-visible{outline:1px solid var(--ink) !important;outline-offset:3px !important}

.cf__meta{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:16px !important;
	font-size:10px !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--soft) !important}
.cf__deg{color:var(--ink) !important;min-width:5ch !important;text-align:right !important}

/* ---- price, said early ---- */
/* Directly under the model, above the view buttons. The number is the first
   thing anyone wants after seeing the suit. */
.cf .cf__from{
	display:flex !important;
	align-items:baseline !important;
	justify-content:space-between !important;
	flex-wrap:wrap !important;
	gap:6px 14px !important;
	margin:0 0 clamp(4px,1vh,8px) !important;
	padding:0 0 clamp(12px,1.6vh,16px) !important;
	border-bottom:1px solid var(--line) !important;
	font-size:12.5px !important;
	color:var(--soft) !important;
}
.cf .cf__from b{
	font-size:clamp(15px,1.2vw,18px) !important;
	font-weight:800 !important;
	letter-spacing:-.02em !important;
	color:var(--ink) !important;
}
.cf .cf__from span{
	font-size:9.5px !important;
	font-weight:700 !important;
	letter-spacing:.16em !important;
	text-transform:uppercase !important;
}

/* ---- the founding athlete ---- */







.cf__details{margin-top:clamp(6px,1.4vh,14px) !important}
.cf .cf__details-k{margin:0 0 10px !important;font-size:9.5px !important;letter-spacing:.18em !important;text-transform:uppercase !important;color:var(--soft) !important}
.cf__thumbs{display:grid !important;grid-template-columns:repeat(5,1fr) !important;gap:8px !important}
.cf button.cf__thumb{appearance:none !important;position:relative !important;display:block !important;padding:0 !important;border:1px solid var(--line) !important;
	border-radius:var(--r-sm) !important;background:transparent !important;aspect-ratio:1/1 !important;overflow:hidden !important;cursor:zoom-in !important;
	transition:border-color .25s var(--e) !important}
.cf button.cf__thumb img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;transition:transform .6s var(--e) !important}
.cf button.cf__thumb:hover{border-color:var(--ink) !important}
.cf button.cf__thumb:hover img{transform:scale(1.06) !important}

/* ---- zoom ---- */
.cf__zoom[hidden]{display:none !important}
.cf__zoom:not(.is-on){pointer-events:none !important}
.cf__zoom{position:fixed !important;inset:0 !important;z-index:9999 !important;background:rgba(10,10,10,.94) !important;display:flex !important;flex-direction:column !important;
	align-items:center !important;justify-content:center !important;gap:18px !important;padding:clamp(40px,7vh,80px) var(--gutter) !important;opacity:0 !important;
	transition:opacity .35s var(--e) !important}
.cf__zoom.is-on{opacity:1 !important;pointer-events:auto !important}
.cf .cf__zoom-img{max-width:min(1100px,100%) !important;max-height:78vh !important;object-fit:contain !important;display:block !important}
.cf .cf__zoom-cap{margin:0 !important;font-size:10px !important;letter-spacing:.18em !important;text-transform:uppercase !important;
	color:rgba(247,245,242,.7) !important;text-align:center !important}
.cf button.cf__zoom-x{appearance:none !important;position:absolute !important;top:clamp(16px,3vh,32px) !important;right:var(--gutter) !important;
	width:44px !important;height:44px !important;border:1px solid rgba(247,245,242,.3) !important;border-radius:999px !important;background:transparent !important;
	color:#F7F5F2 !important;font-size:22px !important;line-height:1 !important;cursor:pointer !important}

/* ---- steps ---- */
.cf__panel{display:flex !important;flex-direction:column !important;gap:clamp(8px,1vh,12px) !important;margin:0 !important}
.cf__step{background:transparent !important;border:1px solid var(--line) !important;border-radius:var(--r) !important;overflow:hidden !important}
.cf__step.is-open{background:transparent !important;border-color:var(--ink) !important}
.cf__step.is-done{border-color:rgba(10,10,10,.2) !important}

.cf button.cf__bar{appearance:none !important;border:0 !important;width:100% !important;display:grid !important;grid-template-columns:1fr auto !important;
	align-items:center !important;gap:4px 14px !important;padding:clamp(14px,1.7vh,20px) clamp(16px,1.6vw,24px) !important;background:transparent !important;
	color:var(--ink) !important;text-align:left !important;cursor:pointer !important;font-family:inherit !important;
	transition:background-color var(--t) var(--e),color var(--t) var(--e) !important}
.cf__step.is-open>.cf__bar,.cf__step.is-done>.cf__bar{background:var(--ink) !important;color:var(--on-ink) !important}
/* The label, the number and the chevron are separate elements, so a theme that
   colours spans can leave them invisible on the black bar even when the bar
   itself is right. Stated rather than inherited. */
.cf__step.is-open>.cf__bar .cf__n,.cf__step.is-done>.cf__bar .cf__n,
.cf__step.is-open>.cf__bar .cf__name,.cf__step.is-done>.cf__bar .cf__name{color:var(--on-ink) !important}
.cf__step.is-open>.cf__bar .cf__chev,.cf__step.is-done>.cf__bar .cf__chev{border-color:var(--on-ink) !important}
.cf .cf__n{grid-column:1 !important;font-size:9.5px !important;letter-spacing:.18em !important;line-height:1 !important;opacity:.55 !important}
.cf .cf__name{grid-column:1 !important;font-size:clamp(12px,1vw,15px) !important;font-weight:800 !important;letter-spacing:.06em !important;
	text-transform:uppercase !important;line-height:1.1 !important;margin-top:5px !important}
.cf__chev{grid-column:2 !important;grid-row:1/span 2 !important;width:11px !important;height:11px !important;border-right:1.5px solid currentColor !important;
	border-bottom:1.5px solid currentColor !important;transform:rotate(45deg) translate(-2px,-2px) !important;transition:transform var(--t) var(--e) !important}
.cf__step.is-open .cf__chev{transform:rotate(225deg) translate(-2px,-2px) !important}

.cf__body{display:grid !important;grid-template-rows:0fr !important;transition:grid-template-rows var(--t) var(--e) !important}
.cf__step.is-open>.cf__body{grid-template-rows:1fr !important}
.cf__inner{overflow:hidden !important;min-height:0 !important}
.cf .cf__pad{padding:clamp(18px,2.4vh,26px) clamp(16px,1.6vw,24px) !important;opacity:0 !important;transition:opacity var(--t) var(--e) !important}
.cf__step.is-open .cf__pad{opacity:1 !important}

.cf .cf__h{margin:0 !important;font-size:clamp(14px,1.1vw,17px) !important;font-weight:800 !important;letter-spacing:-.015em !important;line-height:1.2 !important}
.cf .cf__p{margin:7px 0 0 !important;font-size:clamp(12px,.9vw,14px) !important;line-height:1.55 !important;color:var(--soft) !important}
.cf .cf__foot{margin:clamp(16px,2.2vh,24px) 0 0 !important;font-size:10.5px !important;line-height:1.55 !important;color:var(--soft) !important}

.cf__flow{list-style:none !important;display:grid !important;gap:0 !important;padding:0 !important;margin:clamp(16px,2.2vh,24px) 0 0 !important}
.cf__flow li{display:grid !important;grid-template-columns:auto 1fr !important;gap:4px 14px !important;padding:14px 0 !important;border-top:1px solid var(--line) !important}
.cf__flow li:first-child{border-top:0 !important;padding-top:0 !important}
.cf .cf__flow-n{grid-row:1/span 2 !important;font-size:9.5px !important;font-weight:700 !important;letter-spacing:.16em !important;line-height:1.6 !important;color:var(--soft) !important}
.cf .cf__flow-t{font-size:13px !important;font-weight:800 !important;letter-spacing:-.014em !important;line-height:1.3 !important}
.cf .cf__flow-b{grid-column:2 !important;font-size:11.5px !important;line-height:1.55 !important;color:var(--soft) !important}

.cf__row{padding:clamp(12px,1.6vh,18px) 0 !important;border-top:1px solid var(--line) !important}
.cf__row:first-child{border-top:0 !important;padding-top:0 !important}
.cf__row-head{display:flex !important;align-items:baseline !important;justify-content:space-between !important;gap:14px !important;margin-bottom:12px !important}
/* ---- the recommended option ---- */
.cf .cf__opt-rec{
	display:inline-block !important;
	margin-left:8px !important;
	padding:3px 8px !important;
	border-radius:999px !important;
	background:var(--ink) !important;
	color:var(--on-ink) !important;
	font-size:8.5px !important;
	font-style:normal !important;
	font-weight:700 !important;
	letter-spacing:.14em !important;
	text-transform:uppercase !important;
	vertical-align:2px !important;
}

/* ---- the thickness guide ---- */
.cf button.cf__help{
	appearance:none !important;
	-webkit-appearance:none !important;
	margin-left:10px !important;
	padding:3px 10px 3px 8px !important;
	border:1px solid var(--line) !important;
	border-radius:999px !important;
	background:transparent !important;
	color:var(--soft) !important;
	font-family:inherit !important;
	font-size:9.5px !important;
	font-weight:700 !important;
	letter-spacing:.12em !important;
	text-transform:uppercase !important;
	cursor:pointer !important;
	transition:border-color .25s,color .25s !important;
}
.cf button.cf__help:hover,.cf button.cf__help.is-on{ border-color:var(--ink) !important; color:var(--ink) !important; }
.cf button.cf__help i{ font-style:normal !important; margin-left:4px !important; opacity:.7 !important; }

.cf .cf__temp{
	margin:14px 0 0 !important;
	padding:clamp(16px,2vh,20px) !important;
	border:1px solid var(--ink) !important;
	border-radius:var(--r) !important;
	background:transparent !important;
}
.cf .cf__temp[hidden]{ display:none !important; }
.cf .cf__temp-k{
	margin:0 0 12px !important;
	font-size:9.5px !important;
	font-weight:700 !important;
	letter-spacing:.18em !important;
	text-transform:uppercase !important;
	color:var(--soft) !important;
}
.cf .cf__temp-r{
	display:grid !important;
	grid-template-columns:auto auto 1fr !important;
	gap:4px 14px !important;
	align-items:baseline !important;
	padding:10px 0 !important;
	border-top:1px solid var(--line) !important;
}
.cf .cf__temp-r:first-of-type{ border-top:0 !important; padding-top:0 !important; }
.cf .cf__temp-t{ font-size:13.5px !important; font-weight:800 !important; letter-spacing:-.015em !important; white-space:nowrap !important; }
.cf .cf__temp-d{ font-size:11px !important; font-weight:700 !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--soft) !important; white-space:nowrap !important; }
.cf .cf__temp-n{ grid-column:1 / -1 !important; font-size:12.5px !important; line-height:1.55 !important; color:var(--soft) !important; }
.cf .cf__temp-b{
	margin:14px 0 0 !important;
	padding-top:12px !important;
	border-top:1px solid var(--line) !important;
	font-size:12px !important;
	line-height:1.6 !important;
	color:var(--soft) !important;
}
.cf .cf__temp-b a{ color:var(--ink) !important; font-weight:700 !important; }

@media (min-width:600px){
	.cf .cf__temp-n{ grid-column:3 !important; }
}

.cf .cf__label{display:block !important;font-size:9.5px !important;font-weight:700 !important;letter-spacing:.16em !important;text-transform:uppercase !important;
	color:var(--soft) !important;margin-bottom:8px !important}
.cf .cf__row-head .cf__label{margin-bottom:0 !important}
.cf .cf__val{margin:0 !important;font-size:13px !important;font-weight:800 !important;letter-spacing:-.01em !important}

.cf__opts{display:flex !important;flex-wrap:wrap !important;gap:7px !important}
.cf button.cf__chip{appearance:none !important;border:1px solid var(--line) !important;background:transparent !important;color:rgba(10,10,10,.7) !important;
	border-radius:999px !important;padding:9px 15px !important;font-family:inherit !important;font-size:10.5px !important;letter-spacing:.1em !important;
	text-transform:uppercase !important;cursor:pointer !important;
	transition:background-color .25s var(--e),color .25s var(--e),border-color .25s var(--e) !important}
.cf button.cf__chip:hover{border-color:var(--ink) !important;color:var(--ink) !important}
/* An option we cannot currently build. Left visible and struck through rather
   than hidden, so the range still reads as complete and the customer can see it
   is a shortage, not a choice we never offered. */
.cf button.cf__chip.is-gone{
	opacity:.34 !important;
	cursor:not-allowed !important;
	text-decoration:line-through !important;
	text-decoration-thickness:1px !important;
}
.cf button.cf__chip.is-gone:hover{
	background:transparent !important;
	border-color:var(--line) !important;
	color:var(--soft) !important;
}
.cf button.cf__chip[aria-pressed="true"]{background:var(--ink) !important;border-color:var(--ink) !important;color:var(--on-ink) !important}

/* Three entry systems. Stacked by default, because the panel is only half
   the page; side by side once there is room for three readable cards. */
.cf__cmp{display:grid !important;grid-template-columns:1fr !important;gap:10px !important}
.cf button.cf__opt{appearance:none !important;display:flex !important;flex-direction:column !important;gap:12px !important;text-align:left !important;padding:16px !important;
	border:1px solid var(--line) !important;border-radius:var(--r) !important;background:transparent !important;color:var(--ink) !important;
	font-family:inherit !important;cursor:pointer !important;transition:border-color .25s var(--e),box-shadow .25s var(--e) !important}
.cf button.cf__opt:hover{border-color:var(--ink) !important}
.cf button.cf__opt.is-on{border-color:var(--ink) !important;box-shadow:inset 0 0 0 1px var(--ink) !important}
/* The recommended card carries its badge on the top edge, so the name beside
   it never has to wrap in a narrow column. */
.cf button.cf__opt{position:relative !important;overflow:visible !important}
.cf button.cf__opt.is-rec{margin-top:9px !important}
.cf button.cf__opt.is-rec .cf__opt-rec{position:absolute !important;top:-9px !important;left:15px !important;margin:0 !important;line-height:1.4 !important;vertical-align:0 !important}
.cf .cf__opt-t{font-size:13px !important;font-weight:800 !important;letter-spacing:.04em !important;text-transform:uppercase !important;line-height:1 !important;
	padding-bottom:12px !important;border-bottom:1px solid var(--line) !important}
.cf__opt-m{display:grid !important;gap:11px !important}
.cf__opt-r{display:grid !important;grid-template-columns:1fr auto !important;gap:4px 10px !important}
.cf .cf__opt-k{font-size:9px !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--soft) !important}
.cf .cf__opt-v{font-size:10.5px !important;font-weight:700 !important;text-align:right !important}
.cf__opt-bar{grid-column:1/-1 !important;position:relative !important;display:block !important;height:3px !important;background:rgba(10,10,10,.1) !important}
.cf__opt-bar::after{content:"" !important;position:absolute !important;left:0 !important;top:0 !important;height:3px !important;width:var(--f,0%) !important;background:var(--ink) !important}
.cf .cf__opt-w{font-size:10.5px !important;line-height:1.5 !important;color:var(--soft) !important;padding-top:11px !important;border-top:1px solid var(--line) !important}

.cf__tech{margin-top:clamp(14px,2vh,20px) !important;padding:16px 18px !important;border:1px solid var(--ink) !important;border-radius:var(--r) !important}
.cf .cf__tech-k{margin:0 0 8px !important;font-size:9.5px !important;font-weight:700 !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--soft) !important}
.cf .cf__tech-t{margin:0 !important;font-size:clamp(14px,1.1vw,17px) !important;font-weight:800 !important;letter-spacing:-.018em !important;line-height:1.2 !important}
.cf .cf__tech-s{margin:5px 0 0 !important;font-size:10px !important;font-weight:700 !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--soft) !important}
.cf .cf__tech-b{margin:9px 0 0 !important;font-size:11.5px !important;line-height:1.55 !important;color:var(--soft) !important}
.cf .cf__tech-l{margin:11px 0 0 !important;padding-top:11px !important;border-top:1px solid var(--line) !important;font-size:12px !important;
	font-weight:800 !important;font-style:italic !important;letter-spacing:-.014em !important}

.cf__adds{display:grid !important;gap:8px !important;margin-top:clamp(16px,2.2vh,24px) !important}
.cf button.cf__add{appearance:none !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:14px !important;
	width:100% !important;padding:14px 16px !important;border:1px solid var(--line) !important;border-radius:var(--r-sm) !important;background:transparent !important;
	color:var(--ink) !important;font-family:inherit !important;cursor:pointer !important;text-align:left !important;transition:border-color .25s,background-color .25s !important}
.cf button.cf__add:hover{border-color:var(--ink) !important}
.cf button.cf__add[aria-pressed="true"]{border-color:var(--ink) !important;box-shadow:inset 0 0 0 1px var(--ink) !important}
.cf .cf__add-t{font-size:13px !important;font-weight:700 !important;letter-spacing:-.01em !important}
.cf .cf__add-p{font-size:10px !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--soft) !important}

.cf__field{display:block !important;margin-top:14px !important}
.cf__field--wide{width:100% !important}
.cf .cf__input{width:100% !important;border:1px solid var(--line) !important;border-radius:var(--r-sm) !important;background:transparent !important;color:var(--ink) !important;
	font-family:inherit !important;font-size:16px !important;line-height:1.2 !important;padding:12px 14px !important;appearance:none !important;transition:border-color .25s !important}
.cf .cf__input:focus{outline:0 !important;border-color:var(--ink) !important}
.cf__select{position:relative !important;display:block !important}
.cf .cf__select select{appearance:none !important;-webkit-appearance:none !important;padding-right:38px !important;cursor:pointer !important}
.cf__select-c{position:absolute !important;right:16px !important;top:50% !important;width:8px !important;height:8px !important;margin-top:-6px !important;
	border-right:1.5px solid var(--soft) !important;border-bottom:1.5px solid var(--soft) !important;transform:rotate(45deg) !important;pointer-events:none !important}

.cf__sum{display:grid !important;gap:0 !important;margin:0 !important}
.cf__sum-row{display:flex !important;align-items:baseline !important;justify-content:space-between !important;gap:16px !important;padding:10px 0 !important;
	border-top:1px solid var(--line) !important}
.cf__sum-row:first-child{border-top:0 !important;padding-top:0 !important}
.cf .cf__sum-k{margin:0 !important;font-size:9.5px !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--soft) !important;flex:none !important}
.cf .cf__sum-v{margin:0 !important;font-size:13px !important;font-weight:800 !important;letter-spacing:-.01em !important;text-align:right !important}

.cf__pay{border-top:1px solid var(--line) !important;padding-top:clamp(14px,2vh,20px) !important;margin-top:clamp(14px,2vh,20px) !important;display:grid !important}
.cf__pay-row{display:flex !important;align-items:baseline !important;justify-content:space-between !important;gap:16px !important;padding:9px 0 !important;
	font-size:12.5px !important;color:var(--soft) !important}
.cf__pay-row b{font-weight:700 !important;color:var(--ink) !important}
.cf__pay-row--tot{border-top:1px solid var(--line) !important;margin-top:4px !important;padding-top:13px !important;font-size:13px !important;
	font-weight:700 !important;color:var(--ink) !important}
.cf__pay-row--tot b{font-size:17px !important;font-weight:800 !important;letter-spacing:-.02em !important}

.cf__deposit{margin-top:clamp(16px,2.2vh,24px) !important;padding:18px !important;border-radius:var(--r) !important;background:var(--ink) !important;color:var(--on-ink) !important}
.cf .cf__dep-k{margin:0 !important;font-size:9.5px !important;font-weight:700 !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--on-ink) !important;opacity:.62 !important}
.cf .cf__dep-n{margin:6px 0 0 !important;font-size:clamp(28px,2.4vw,38px) !important;font-weight:800 !important;letter-spacing:-.03em !important;line-height:1 !important;color:var(--on-ink) !important}
.cf .cf__dep-b{margin:10px 0 0 !important;font-size:11px !important;line-height:1.55 !important;color:var(--on-ink) !important;opacity:.72 !important}

.cf__you{margin-top:clamp(18px,2.6vh,28px) !important}
.cf .cf__you-k{margin:0 0 6px !important;font-size:9.5px !important;font-weight:700 !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--soft) !important}

.cf button.cf__next,.cf .cf__cta{display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;width:100% !important;
	margin-top:clamp(18px,2.6vh,28px) !important;padding:15px 24px !important;border:1px solid var(--ink) !important;border-radius:999px !important;
	background:var(--ink) !important;color:var(--on-ink) !important;font-family:inherit !important;font-size:11px !important;letter-spacing:.22em !important;
	text-transform:uppercase !important;text-decoration:none !important;cursor:pointer !important;appearance:none !important;
	transition:background-color .3s,color .3s !important}
.cf button.cf__next:hover,.cf .cf__cta:hover{background:transparent !important;color:var(--ink) !important}
.cf button.cf__next span,.cf .cf__cta span{color:inherit !important}
.cf button.cf__next:focus-visible,.cf .cf__cta:focus-visible{outline:1px solid var(--ink) !important;outline-offset:3px !important}
.cf button.cf__cta:disabled,.cf button.cf__cta:disabled:hover{opacity:.35 !important;cursor:not-allowed !important;background:var(--ink) !important;color:var(--on-ink) !important}

.cf__micro{margin-top:clamp(16px,2.2vh,22px) !important;display:grid !important;gap:8px !important}
.cf__micro p{margin:0 !important;font-size:10.5px !important;line-height:1.55 !important;color:var(--soft) !important}
.cf__micro b{font-weight:700 !important;color:var(--ink) !important}
.cf__more{border-top:1px solid var(--line) !important;padding-top:8px !important}
.cf .cf__more summary{list-style:none !important;cursor:pointer !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.12em !important;
	text-transform:uppercase !important;color:var(--soft) !important;padding:2px 0 !important}
.cf .cf__more summary::-webkit-details-marker{display:none !important}
.cf .cf__more summary::after{content:" +" !important}
.cf .cf__more[open] summary::after{content:" \2212" !important}
.cf__more-b{display:grid !important;gap:9px !important;padding:10px 0 4px !important}
.cf__more-b p{font-size:10.5px !important;line-height:1.55 !important;color:var(--soft) !important}

.cf__closed{padding:clamp(24px,4vh,40px) !important;border:1px solid var(--ink) !important;border-radius:var(--r) !important;background:var(--open) !important}
.cf__closed h3{margin:0 0 10px !important;font-size:clamp(18px,1.8vw,26px) !important;font-weight:800 !important;letter-spacing:-.024em !important}
.cf__closed p{margin:0 !important;font-size:14px !important;line-height:1.6 !important;color:var(--soft) !important}

@media (min-width:1200px){
	.cf__cmp{grid-template-columns:repeat(3,minmax(0,1fr)) !important;padding-top:9px !important}
	.cf button.cf__opt{padding:16px 14px !important}
	.cf button.cf__opt.is-rec{margin-top:0 !important}
	/* key over value: "Watertightness" and "Excellent" side by side do not
	   fit a third of the panel */
	.cf__opt-r{grid-template-columns:1fr !important;gap:3px !important}
	.cf .cf__opt-v{text-align:left !important}
	.cf__opt-bar{margin-top:3px !important}
}
@media (max-width:1023px){
	.cf__grid{gap:clamp(16px,2vw,28px) !important}
	.cf__stage{height:clamp(400px,58svh,640px) !important}
}
@media (max-width:767px){
	.cf__grid{grid-template-columns:1fr !important;gap:24px !important}
	.cf__viewer{position:static !important}
	.cf__stage{height:clamp(380px,62svh,560px) !important}
	.cf__cmp{grid-template-columns:1fr !important}
}
@media (prefers-reduced-motion:reduce){
	.cf__body,.cf .cf__pad,.cf__chev,.cf__f,.cf button.cf__bar,.cf button.cf__chip,
	.cf button.cf__add,.cf button.cf__next,.cf .cf__cta,.cf__zoom{transition:none !important}
}
