* {
	box-sizing: border-box;
}

.d-none {
	display: none;
}

.kolibri .b24-form-wrapper {
	max-width: 100%;
	min-height: auto;
	background: transparent;
}

.kolibri .b24-form-content form > div:first-child {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.kolibri .b24-form-field {
	margin: 0px 0px 5px 0px;
	width: 100%;
}

.kolibri .b24-form-header-title {
	font-family: var(--f-d);
	font-weight: 600;
	font-size: 20px;
	margin: 20px 0px;
	text-transform: uppercase;
	line-height: 1.2;
	letter-spacing: -0.1px;
}

.kolibri .b24-form-header-description {
	font-family: var(--f-d);
	font-weight: 400;
	color: #000000;
	opacity: 1;
	font-size: 16px;
}

.kolibri .b24-form-wrapper.b24-from-state-on {
	min-height: auto !important;
}

.kolibri .b24-from-state-on .b24-form-state-container {
	background: #fcfcfc;
}

.kolibri .b24-form-wrapper.b24-from-state-on .b24-form-header-padding {
	display: none;
}

.kolibri .b24-form-state-container .b24-form-loader,
.kolibri .b24-form-state-container .b24-form-state {
	background: transparent;
	bottom: 0 !important;
}

.kolibri .b24-form-success-icon {
	width: 70px;
	height: 70px;
}

.kolibri .b24-form-success .b24-form-state-text {
	font-family: var(--f-d);
	font-size: 18px;
	margin-bottom: 0;
}

.kolibri .b24-form-header {
	border: none;
}

.kolibri .b24-form-sign {
	display: none;
}

.kolibri .b24-form-header-padding {
	padding: 0;
}

.kolibri .b24-form-header-padding .form_desc {
	padding: 30px 30px 0px 30px;
}

.kolibri .b24-form-content {
	padding: 20px 30px 30px 30px;
}

.kolibri .b24-form-header-padding .form_desc h3 {
	width: 100%;
	margin: 5px 0px 15px 0px;
	font-size: 22px;
	font-weight: 400;
	position: relative;
	font-family: var(--f-d);
	line-height: 1;
}

.kolibri .b24-form-header-padding .form_desc h4 {
	font-size: 14px !important;
	line-height: 1.2;
	font-weight: 400 !important;
	font-family: var(--f-d) !important;
	color: #444 !important;
}

.kolibri .b24-form-control-container {
	margin: 0;
}

.kolibri .b24-form-control-icon-after .b24-form-control {
	border: none;
	background: #0000000d;
	font: 14px var(--f-d) !important;
	border-radius: 24px;
	height: 45px;
	display: inline-flex;
	align-items: center;
	width: 100%;
}

.kolibri .b24-form-control-label {
	color: #47474794;
	opacity: 1;
	font-family: var(--f-d);
	font-size: 14px !important;
}

.kolibri .b24-form-control-select-label,
.kolibri .b24-form-control:focus+.b24-form-control-label,
.kolibri .b24-form-control-not-empty+.b24-form-control-label {
	display: none;
}

.kolibri .b24-form-control-icon-after .b24-form-control:focus,
.kolibri .b24-form-control-icon-after .b24-form-control-not-empty {
	padding-top: 0;
	padding-bottom: 0;
}

.kolibri .b24-form-wrapper.b24-form-border-bottom {
	border: none
}

.kolibri .b24-form-btn-container {
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin: 10px 0px 0px 0px;
}

.kolibri .b24-form-btn-block {
	display: flex;
	width: 100%;
	justify-content: center;
	position: relative;
	margin: 0 auto;
	padding: 0;
	min-height: auto;
}

.kolibri .b24-form-btn-block button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 42px;
	border: none;
	min-height: auto;
	padding: 0;
	font-size: 14px;
	font-family: var(--f-d) !important;
	font-weight: 600;
	line-height: 1;
	transition: 0.5s;
	background-color: var(--ok);
	color: #ffffff;
	box-shadow: none;
	text-transform: uppercase;
	border-radius: 24px;
}

.kolibri .b24-form-btn-block button:hover {
	background-color: var(--brand);
	color: #ffffff;
}

.kolibri .b24-form-field.b24-form-field-agreement {
	width: 100%;
	margin-bottom: 25px;
	display: none;
}

.kolibri .b24-window-popup-wrapper {
	max-width: 400px;
	border-radius: 0px;
	overflow: hidden;
}

.kolibri .b24-window-close {
	background-color: var(--ok);
	right: 12px;
	opacity: 1;
}

.kolibri .b24-window-close:after,
.kolibri .b24-window-close:before {
	background-color: #ffffff;
}

:root {
	--bg: #FFFFFF;
	--soft: #F6F7FB;
	--ink: #1D2433;
	--muted: #6E7586;
	--line: #ECEEF4;
	--btn: #1D2433;
	--on-btn: #FFFFFF;
	--glass: rgba(255,255,255,.72);
	--a1: #E7E1FF;
	--a2: #DCEBFF;
	--a3: #FFE4D8;
	--a4: #D9F4EA;
	--a5: #FFF0C9;
	--a6: #F5DDF0;
	--shadow: 0 30px 60px -30px rgba(29,36,51,.25);
	--f-d: "Jost","Century Gothic",system-ui,sans-serif;
	--f-b: "Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

@media (prefers-color-scheme:dark) {
	:root:not([data-theme="light"]) {
		--bg: #0E1220;
		--soft: #151A2B;
		--ink: #EEF0F7;
		--muted: #9AA1B5;
		--line: #232A40;
		--btn: #EEF0F7;
		--on-btn: #0E1220;
		--glass: rgba(21,26,43,.72);
		--a1: #2A2450;
		--a2: #1B2D4F;
		--a3: #4A2C25;
		--a4: #173A33;
		--a5: #463A17;
		--a6: #43213D;
		--shadow: 0 30px 60px -30px rgba(0,0,0,.6);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: #0E1220;
	--soft: #151A2B;
	--ink: #EEF0F7;
	--muted: #9AA1B5;
	--line: #232A40;
	--btn: #EEF0F7;
	--on-btn: #0E1220;
	--glass: rgba(21,26,43,.72);
	--a1: #2A2450;
	--a2: #1B2D4F;
	--a3: #4A2C25;
	--a4: #173A33;
	--a5: #463A17;
	--a6: #43213D;
	--shadow: 0 30px 60px -30px rgba(0,0,0,.6);
	color-scheme: dark;
}

* {
	box-sizing: border-box;
}

[hidden] {
	display: none!important;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 17px/1.65 var(--f-b);
	-webkit-font-smoothing: antialiased;
}

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: max(20px,env(safe-area-inset-left,0px));
	padding-right: max(20px,env(safe-area-inset-right,0px));
}

h1,h2,h3 {
	font-family: var(--f-d);
	font-weight: 300;
	margin: 0;
	line-height: 1.05;
	letter-spacing: -.02em;
	text-wrap: balance;
}

h2 {
	font-size: clamp(36px,5vw,64px);
}

h3 {
	font-weight: 400;
}

p {
	margin: 0;
}

a {
	color: inherit;
}

button,input,select,textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

.eyebrow {
	font: 500 15px var(--f-d);
	color: var(--muted);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 999px;
	padding: 15px 28px;
	font: 500 16px var(--f-d);
	cursor: pointer;
	text-decoration: none;
	transition: transform .2s,box-shadow .2s,background .2s;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn.d {
	background: var(--btn);
	color: var(--on-btn);
	box-shadow: 0 12px 28px -12px rgba(29,36,51,.5);
}

.btn.l {
	background: var(--glass);
	color: var(--ink);
	backdrop-filter: blur(12px);
	box-shadow: inset 0 0 0 1px var(--line);
}

.btn.sm {
	padding: 10px 18px;
	font-size: 15px;
}

.link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--muted);
	cursor: pointer;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.icb {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	background: var(--soft);
	display: inline-grid;
	place-items: center;
	cursor: pointer;
	position: relative;
	text-decoration: none;
	transition: background .2s;
}

.icb:hover {
	background: var(--line);
}

.icb svg {
	width: 20px;
	height: 20px;
}

.icb[aria-pressed="true"] {
	background: #FFE1E6;
	color: #C8264E;
}

.cnt {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	background: var(--btn);
	color: var(--on-btn);
	font: 600 11px/20px var(--f-b);
	padding: 0 5px;
	text-align: center;
}

.cnt:empty {
	display: none;
}

/* header */
body::before {
	content: "";
	position: fixed;
	inset: 0 0 auto;
	height: env(safe-area-inset-top,0px);
	z-index: 40;
	background: var(--bg);
}

.hd {
	position: sticky;
	top: env(safe-area-inset-top,0px);
	z-index: 30;
	background: color-mix(in srgb,var(--bg) 80%,transparent);
	backdrop-filter: saturate(1.6) blur(16px);
}

.hd .wrap {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-block: 14px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font: 400 26px/1 var(--f-d);
	letter-spacing: .02em;
}

.logo i {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: conic-gradient(from 200deg,#B9A8FF,#9CC8FF,#FFC2A8,#A6E8CF,#B9A8FF);
	box-shadow: inset 0 0 0 6px var(--bg);
}

.nav {
	display: flex;
	gap: 26px;
	font: 400 16px var(--f-d);
}

.nav a {
	text-decoration: none;
	color: var(--muted);
	transition: color .2s;
}

.nav a:hover,.nav a.on {
	color: var(--ink);
}

.hr {
	margin-left: auto;
	display: flex;
	gap: 8px;
	align-items: center;
}

.sbtn {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--soft);
	border-radius: 999px;
	padding: 0 16px;
	height: 46px;
	min-width: 0;
}

.sbtn input {
	border: 0;
	background: transparent;
	outline: 0;
	width: 200px;
	min-width: 0;
}

.sbtn svg {
	width: 18px;
	height: 18px;
	color: var(--muted);
	flex: none;
}

.sg {
	position: absolute;
	top: calc(100% + 4px);
	right: max(20px,env(safe-area-inset-right,0px));
	width: 380px;
	max-width: calc(100vw - 40px);
	background: var(--bg);
	border-radius: 24px;
	box-shadow: 0 30px 70px -20px rgba(29,36,51,.35);
	padding: 8px;
	z-index: 5;
}

.sg a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px;
	border-radius: 16px;
	text-decoration: none;
}

.sg a:hover {
	background: var(--soft);
}

.sg .th {
	width: 64px;
	height: 48px;
	border-radius: 12px;
	flex: none;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.sg .th svg {
	width: 100%;
	height: 100%;
}

.sg small {
	display: block;
	color: var(--muted);
	font-size: 13px;
}

@media (max-width:860px) {
	.nav {
		display: none;
	}

	.sbtn input {
		width: 120px;
	}
}

@media (max-width:560px) {
	.sbtn {
		display: none;
	}

	.hd .wrap {
		gap: 12px;
	}

	.mobs {
		display: inline-grid!important;
	}
}

.mobs {
	display: none!important;
}

.msrch {
	padding-bottom: 12px;
}

.msrch input {
	width: 100%;
	border: 0;
	background: var(--soft);
	border-radius: 999px;
	padding: 13px 18px;
	outline: 0;
}

/* hero */
.hero {
	position: relative;
	overflow: hidden;
	padding-block: 40px 20px;
	text-align: center;
}

.aura {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .9;
	pointer-events: none;
}

.hero .aura.x {
	width: 520px;
	height: 520px;
	background: var(--a1);
	left: 50%;
	top: 220px;
	transform: translateX(-80%);
}

.hero .aura.y {
	width: 460px;
	height: 460px;
	background: var(--a3);
	left: 50%;
	top: 260px;
	transform: translateX(0%);
}

.hero .aura.z {
	width: 380px;
	height: 380px;
	background: var(--a2);
	left: 50%;
	top: 120px;
	transform: translateX(-30%);
}

.hero h1 {
	font-size: clamp(46px,7.4vw,104px);
	position: relative;
}

.hero h1 b {
	font-weight: 500;
}

.hero .lead {
	font-size: clamp(18px,1.6vw,21px);
	color: var(--muted);
	max-width: 40ch;
	margin: 22px auto 0;
	position: relative;
}

.hero .row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 32px;
	position: relative;
}

.stagepic {
	position: relative;
	max-width: 220px;
	margin: 20px auto 0;
}

.stagepic svg {
	width: 100%;
	height: auto;
	display: block;
}

.float {
	animation: float 6s ease-in-out infinite;
}

@keyframes float {
	50% {
		transform: translateY(-10px);
	}
}

.trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 34px;
	color: var(--muted);
	font-size: 15px;
	position: relative;
	margin-top: 8px;
}

.trust span {
	display: flex;
	align-items: center;
	gap: 8px;
}

.trust span::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: .5;
}

.sec {
	padding-block: 90px;
}

.center {
	text-align: center;
}

.center p.sub {
	color: var(--muted);
	max-width: 52ch;
	margin: 16px auto 0;
	font-size: 19px;
}

/* needs */
.needs {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 18px;
	margin-top: 48px;
}

.need {
	border-radius: 32px;
	padding: 30px;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 240px;
	position: relative;
	overflow: hidden;
	transition: transform .3s;
}

.need:hover {
	transform: translateY(-4px);
}

.need svg.ic {
	width: 52px;
	height: 52px;
}

.need h3 {
	font-size: 30px;
}

.need p {
	color: var(--muted);
	font-size: 16px;
	max-width: 30ch;
}

.need .go {
	margin-top: auto;
	font: 500 16px var(--f-d);
	display: flex;
	align-items: center;
	gap: 8px;
}

.need .go::after {
	content: "→";
	transition: transform .2s;
}

.need:hover .go::after {
	transform: translateX(4px);
}

@media (max-width:900px) {
	.needs {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width:560px) {
	.needs {
		grid-template-columns: 1fr;
	}
}

/* showcase */
.show {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 40px;
	align-items: center;
	padding-block: 40px;
}

.show:nth-child(even) .pic {
	order: 2;
}

.show .pic {
	border-radius: 40px;
	position: relative;
	overflow: hidden;
	aspect-ratio: 5/4;
	display: grid;
	place-items: center;
	max-width: 100%;
}

.show .pic svg {
	width: 92%;
	height: auto;
}

.show h3 {
	font-size: clamp(34px,4vw,54px);
	font-weight: 300;
}

.show p {
	color: var(--muted);
	font-size: 18px;
	margin-top: 16px;
	max-width: 42ch;
}

.show ul {
	list-style: none;
	padding: 0;
	margin: 22px 0 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.show li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.show li::before {
	content: "";
	width: 22px;
	height: 22px;
	border-radius: 50%;
	flex: none;
	margin-top: 3px;
	background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%236E7586' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (max-width:860px) {
	.show {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.show:nth-child(even) .pic {
		order: 0;
	}
}

/* product cards */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(270px,1fr));
	gap: 22px;
}

.pc {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	position: relative;
}

.pc .pic {
	border-radius: 28px;
	aspect-ratio: 1/1;
	display: grid;
	place-items: center;
	position: relative;
	overflow: hidden;
	transition: transform .35s;
	text-decoration: none;
}

.pc .pic svg {
	width: 90%;
	height: auto;
	transition: transform .5s;
}

.pc:hover .pic svg {
	transform: scale(1.05) translateY(-4px);
}

.pc .fav {
	position: absolute;
	right: 14px;
	top: 14px;
	background: var(--glass);
	backdrop-filter: blur(10px);
}

.pc .tag {
	position: absolute;
	left: 16px;
	top: 16px;
	background: var(--glass);
	backdrop-filter: blur(10px);
	border-radius: 999px;
	padding: 5px 12px;
	font: 500 13px var(--f-d);
}

.pc .mk {
	color: var(--muted);
	font-size: 14px;
	margin-top: 10px;
}

.pc h3 {
	font-size: 24px;
	line-height: 1.15;
}

.pc h3 a {
	text-decoration: none;
}

.pc .desc {
	color: var(--muted);
	font-size: 15px;
}

.pc .bot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
}

.price {
	font: 400 20px/1.2 var(--f-d);
}

.price small {
	display: block;
	font: 400 13px var(--f-b);
	color: var(--muted);
}

.addb {
	height: 46px;
	padding: 0 20px;
	border-radius: 999px;
	border: 0;
	background: var(--btn);
	color: var(--on-btn);
	font: 500 15px var(--f-d);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: transform .2s;
	white-space: nowrap;
}

.addb:hover {
	transform: translateY(-2px);
}

.addb.ok {
	background: #2FA77A;
	color: #fff;
}

/* catalog */
.chead {
	padding-block: 50px 10px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.chead h1 {
	font-size: clamp(46px,7vw,92px);
}

.chead p {
	color: var(--muted);
	margin-top: 12px;
	font-size: 18px;
}

.chead .aura {
	width: 600px;
	height: 300px;
	background: var(--a2);
	left: 50%;
	top: -80px;
	transform: translateX(-50%);
}

.pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 30px 0 14px;
	position: relative;
}

.pill {
	border: 0;
	background: var(--soft);
	border-radius: 999px;
	padding: 11px 20px;
	font: 400 16px var(--f-d);
	cursor: pointer;
	transition: background .2s,color .2s;
}

.pill:hover {
	background: var(--line);
}

.pill[aria-pressed="true"] {
	background: var(--btn);
	color: var(--on-btn);
}

.subf {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	align-items: center;
	margin-bottom: 40px;
	color: var(--muted);
	font-size: 15px;
}

.subf select {
	border: 0;
	background: var(--soft);
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 15px;
	cursor: pointer;
}

.empty {
	text-align: center;
	padding: 60px 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

.empty h2 {
	font-size: 40px;
}

.empty p {
	color: var(--muted);
}

/* product */
.pp {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 48px;
	align-items: start;
	padding-block: 30px 40px;
}

.pp .pic {
	border-radius: 40px;
	aspect-ratio: 1/1;
	display: grid;
	place-items: center;
	position: sticky;
	top: calc(env(safe-area-inset-top,0px) + 90px);
	overflow: hidden;
	max-width: 100%;
}

.pp .pic svg {
	width: 92%;
	height: auto;
}

.back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	text-decoration: none;
	font-size: 15px;
	margin-top: 20px;
}

.back:hover {
	color: var(--ink);
}

.pinfo {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-top: 20px;
	min-width: 0;
}

.pinfo h1 {
	font-size: clamp(42px,5vw,68px);
}

.pinfo .lead {
	font-size: 19px;
	color: var(--muted);
}

.hl {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.hl div {
	background: var(--soft);
	border-radius: 22px;
	padding: 18px;
}

.hl b {
	display: block;
	font: 400 19px var(--f-d);
}

.hl span {
	font-size: 14px;
	color: var(--muted);
}

.pinfo .price {
	font-size: 32px;
}

.qty {
	display: inline-flex;
	align-items: center;
	background: var(--soft);
	border-radius: 999px;
	height: 54px;
}

.qty button {
	width: 48px;
	height: 54px;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 20px;
}

.qty span {
	min-width: 24px;
	text-align: center;
	font-weight: 700;
}

.brow {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.brow .btn.d {
	flex: 1 1 200px;
	padding-block: 17px;
}

.acc details {
	border-top: 1px solid var(--line);
	padding-block: 18px;
}

.acc details:last-child {
	border-bottom: 1px solid var(--line);
}

.acc summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	font: 400 20px var(--f-d);
}

.acc summary::after {
	content: "+";
	font-size: 24px;
	line-height: 1;
	color: var(--muted);
	transition: transform .2s;
}

.acc details[open] summary::after {
	transform: rotate(45deg);
}

.acc .in {
	color: var(--muted);
	padding-top: 10px;
	font-size: 16px;
}

.acc ul {
	margin: 0;
	padding-left: 20px;
}

@media (max-width:900px) {
	.pp {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.pp .pic {
		position: static;
	}
}

/* drawer */
.scrim {
	position: fixed;
	inset: 0;
	background: rgba(14,18,32,.35);
	backdrop-filter: blur(4px);
	z-index: 55;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s;
}

.scrim.on {
	opacity: 1;
	pointer-events: auto;
}

.drawer {
	position: fixed;
	top: 12px;
	right: 12px;
	bottom: 12px;
	width: min(440px,calc(100vw - 24px));
	background: var(--bg);
	border-radius: 32px;
	z-index: 60;
	transform: translateX(110%);
	transition: transform .35s cubic-bezier(.2,.8,.2,1);
	display: flex;
	flex-direction: column;
	box-shadow: 0 40px 90px -20px rgba(14,18,32,.45);
	margin-top: env(safe-area-inset-top,0px);
	margin-bottom: env(safe-area-inset-bottom,0px);
	margin-right: env(safe-area-inset-right,0px);
}

.drawer.on {
	transform: none;
}

.dh {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 26px 10px;
}

.dh h2 {
	font-size: 32px;
}

.db {
	flex: 1;
	overflow: auto;
	padding: 4px 26px;
}

.df {
	padding: 20px 26px 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.li {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 16px;
	padding-block: 14px;
	align-items: center;
}

.li+.li {
	border-top: 1px solid var(--line);
}

.li .th {
	border-radius: 20px;
	aspect-ratio: 1/1;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.li .th svg {
	width: 92%;
	height: auto;
}

.li b {
	font: 400 18px/1.2 var(--f-d);
	display: block;
}

.li .ctl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
}

.li .qty {
	height: 38px;
}

.li .qty button {
	width: 34px;
	height: 38px;
	font-size: 17px;
}

.tot {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.tot b {
	font: 400 28px var(--f-d);
}

/* checkout */
.co {
	display: grid;
	grid-template-columns: minmax(0,1fr) 380px;
	gap: 40px;
	align-items: start;
	padding-block: 20px 90px;
}

.co h1 {
	font-size: clamp(42px,6vw,72px);
	margin-bottom: 10px;
}

.co .lead {
	color: var(--muted);
	margin-bottom: 30px;
}

.form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.form .t {
	grid-column: 1/-1;
	font: 400 24px var(--f-d);
	margin-top: 18px;
}

.f {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.f.w {
	grid-column: 1/-1;
}

.f label {
	font-size: 14px;
	color: var(--muted);
	padding-left: 6px;
}

.f input,.f select,.f textarea {
	border: 1.5px solid transparent;
	background: var(--soft);
	border-radius: 18px;
	padding: 15px 18px;
	width: 100%;
	outline: 0;
	transition: border-color .2s,background .2s;
}

.f input:focus,.f select:focus,.f textarea:focus {
	border-color: var(--ink);
	background: var(--bg);
}

.f textarea {
	min-height: 100px;
	resize: vertical;
}

.err {
	color: #D0384F;
	font-size: 13px;
	padding-left: 6px;
}

.seg {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.seg label {
	background: var(--soft);
	border-radius: 999px;
	padding: 11px 18px;
	cursor: pointer;
	font-size: 15px;
	transition: background .2s;
}

.seg label:has(input:checked) {
	background: var(--btn);
	color: var(--on-btn);
}

.seg label:has(input:focus-visible) {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.seg input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sum {
	background: var(--soft);
	border-radius: 32px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: sticky;
	top: calc(env(safe-area-inset-top,0px) + 90px);
}

.sum .r {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 15px;
}

.sum .r span:last-child {
	white-space: nowrap;
}

.sum p {
	font-size: 14px;
	color: var(--muted);
}

@media (max-width:960px) {
	.co {
		grid-template-columns: 1fr;
	}

	.sum {
		position: static;
	}
}

@media (max-width:600px) {
	.form {
		grid-template-columns: 1fr;
	}
}

.done {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	padding-block: 80px 100px;
	position: relative;
}

.done .ok {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	margin: 0 auto 26px;
	display: grid;
	place-items: center;
	background: var(--a4);
}

.done h1 {
	font-size: clamp(40px,6vw,64px);
}

.done p {
	color: var(--muted);
	margin-top: 14px;
	font-size: 18px;
}

.done pre {
	text-align: left;
	white-space: pre-wrap;
	font: 14px/1.6 var(--f-b);
	background: var(--soft);
	border-radius: 24px;
	padding: 22px;
	margin: 26px 0;
	color: var(--ink);
}

/* care band */
.care {
	border-radius: 48px;
	padding: 70px 60px;
	position: relative;
	overflow: hidden;
	background: var(--soft);
}

.care .aura {
	width: 500px;
	height: 500px;
	background: var(--a4);
	right: -120px;
	top: -160px;
}

.care .g {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 30px;
	margin-top: 46px;
	position: relative;
}

.care .g div {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.care .g svg {
	width: 40px;
	height: 40px;
}

.care .g b {
	font: 400 22px/1.2 var(--f-d);
}

.care .g span {
	color: var(--muted);
	font-size: 15px;
}

@media (max-width:900px) {
	.care {
		padding: 44px 26px;
	}

	.care .g {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width:520px) {
	.care .g {
		grid-template-columns: 1fr;
	}
}

.cta {
	text-align: center;
	padding-block: 100px;
	position: relative;
	overflow: hidden;
}

.cta .aura.x {
	width: 420px;
	height: 420px;
	background: var(--a6);
	left: 20%;
	top: 0;
}

.cta .aura.y {
	width: 420px;
	height: 420px;
	background: var(--a5);
	right: 15%;
	top: 60px;
}

.cta h2,.cta p,.cta .row {
	position: relative;
}

.cta p {
	color: var(--muted);
	margin: 18px auto 30px;
	max-width: 46ch;
	font-size: 19px;
}

footer {
	border-top: 1px solid var(--line);
	padding-block: 40px;
	color: var(--muted);
	font-size: 14px;
}

footer .wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}

footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

footer a {
	text-decoration: none;
}

footer a:hover {
	color: var(--ink);
}

.toast {
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom,0px));
	transform: translate(-50%,30px);
	opacity: 0;
	pointer-events: none;
	background: var(--btn);
	color: var(--on-btn);
	border-radius: 999px;
	padding: 13px 22px;
	z-index: 70;
	transition: .3s;
	display: flex;
	gap: 14px;
	align-items: center;
	max-width: calc(100% - 32px);
	box-shadow: 0 20px 40px -12px rgba(0,0,0,.4);
}

.toast.on {
	opacity: 1;
	transform: translate(-50%,0);
	pointer-events: auto;
}

.toast button {
	border: 0;
	background: none;
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

@media (prefers-reduced-motion:reduce) {
	* {
		animation: none!important;
		transition: none!important;
	}
}