/* ============================================================================
   GearUP GK15 kettle landing page.

   Design thesis: the product's defining trait is that you can see through it.
   Transparency is also the exact problem a cash-on-delivery page has to solve,
   so the page is built from glass and water - porcelain ground, tea-red accent,
   deep water teal - and its one signature is the scroll rail that fills like the
   kettle's own volume markings.

   Colour tokens come from the product photograph itself: the beige-gold collar,
   the grey handle, brewed tea, and the teal already used by the main store.
   ========================================================================== */

@font-face {
	font-family: 'Hind Siliguri';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/hind-400.woff2') format('woff2');
	unicode-range: U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

@font-face {
	font-family: 'Hind Siliguri';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/hind-700.woff2') format('woff2');
	unicode-range: U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

:root {
	--ink: #171310;
	--ink-70: #4a423b;
	--ink-45: #7d736a;

	--porcelain: #f2f4f5;
	--porcelain-deep: #e4e9ea;
	--white: #ffffff;

	/* Straight off the product: the beige-gold collar and base. */
	--brass: #c9a27e;
	--brass-pale: #f3e6d9;

	/* Brewed tea. The only loud colour on the page, spent on price and action. */
	--cha: #b4441a;
	--cha-deep: #8d3311;

	/* Water seen through glass; a deeper cousin of the store's own teal. */
	--glass: #0e5a57;
	--glass-pale: #dceceb;

	--ok: #1c7a45;

	--rail: 44px;
	--gutter: 16px;
	--max: 640px;

	--r-sm: 8px;
	--r-md: 14px;
	--r-lg: 22px;

	--shadow-sm: 0 1px 2px rgba(23, 19, 16, .06), 0 2px 8px rgba(23, 19, 16, .05);
	--shadow-md: 0 2px 6px rgba(23, 19, 16, .07), 0 12px 28px rgba(23, 19, 16, .09);
	--shadow-cta: 0 4px 14px rgba(180, 68, 26, .34);

	--font: 'Hind Siliguri', 'Noto Sans Bengali', 'SolaimanLipi', 'Kalpurush',
		system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--porcelain);
	color: var(--ink);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.75;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.005em;
}

p {
	margin: 0;
}

a {
	color: var(--glass);
}

:focus-visible {
	outline: 3px solid var(--glass);
	outline-offset: 3px;
	border-radius: 4px;
}

.wrap {
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Signature: the water-level rail.

   Scroll progress drawn as water rising inside the kettle, marked with the very
   same 0.5L / 1.0L / 1.5L / MAX ticks moulded into the real glass body. It is
   the page's only ornament, and it encodes something true.
   -------------------------------------------------------------------------- */

.rail {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--rail);
	z-index: 30;
	pointer-events: none;
	display: none;
}

.rail__tube {
	position: absolute;
	top: 18vh;
	bottom: 18vh;
	left: 50%;
	width: 8px;
	margin-left: -4px;
	border-radius: 999px;
	background: rgba(14, 90, 87, .1);
	overflow: hidden;
}

.rail__water {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
	background: linear-gradient(180deg, var(--glass) 0%, #1c7f7a 100%);
	border-radius: 999px;
	transition: height .12s linear;
}

.rail__tick {
	position: absolute;
	left: 50%;
	width: 18px;
	margin-left: -9px;
	height: 1px;
	background: rgba(14, 90, 87, .32);
}

.rail__tick span {
	position: absolute;
	left: 22px;
	top: -10px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--ink-45);
	white-space: nowrap;
}

@media (min-width: 1040px) {
	.rail {
		display: block;
	}
}

/* --------------------------------------------------------------------------
   Hero. The thesis shot: water boiling behind glass, lit by the kettle itself.
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	background: #0d0b0a;
	color: var(--white);
	overflow: hidden;
}

.hero__media {
	position: relative;
}

.hero__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	max-height: 62svh;
	object-fit: cover;
	object-position: center 44%;
	opacity: .9;
}

/* Darkened at the very top so the logo and hotline stay legible over any frame, and
   faded to solid at the bottom so the headline below reads as part of the same image. */
.hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13, 11, 10, .82) 0%, rgba(13, 11, 10, .12) 30%, rgba(13, 11, 10, .55) 68%, #0d0b0a 100%);
}

.hero__top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 14px 0;
}

.hero__brandrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.hero__brand {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .01em;
}

.hero__brand img {
	height: 26px;
	width: auto;
}

.hero__call {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .13);
	border: 1px solid rgba(255, 255, 255, .22);
	color: var(--white);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	backdrop-filter: blur(6px);
}

/* Pulled up over the faded foot of the image rather than laid across it: on an ad
   landing page the product has to be seen in full before anything is claimed about it. */
.hero__copy {
	position: relative;
	z-index: 2;
	margin-top: -72px;
	padding-bottom: 30px;
}

.hero__eyebrow {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(180, 68, 26, .92);
	color: var(--white);
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 14px;
}

.hero h1 {
	font-size: clamp(30px, 8.4vw, 44px);
	line-height: 1.22;
	text-wrap: balance;
}

.hero h1 em {
	font-style: normal;
	color: var(--brass);
}

.hero__sub {
	margin-top: 12px;
	font-size: 17px;
	color: rgba(255, 255, 255, .84);
	max-width: 30ch;
}

/* The price block reads as a tag hung on the page, not a line of text. */
.pricetag {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.pricetag__now {
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--white);
}

.pricetag__now span {
	font-size: 26px;
	margin-right: 2px;
	color: var(--brass);
}

.pricetag__was {
	font-size: 20px;
	color: rgba(255, 255, 255, .5);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	padding-bottom: 5px;
}

.pricetag__save {
	padding: 4px 11px;
	border-radius: var(--r-sm);
	background: var(--brass);
	color: #3a2a18;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 17px 22px;
	border: 0;
	border-radius: var(--r-md);
	background: var(--cha);
	color: var(--white);
	font-family: inherit;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--shadow-cta);
	transition: transform .12s ease, background .16s ease;
}

.btn:hover {
	background: var(--cha-deep);
}

.btn:active {
	transform: translateY(1px);
}

.btn[disabled] {
	opacity: .62;
	cursor: not-allowed;
	box-shadow: none;
}

.btn--hero {
	margin-top: 20px;
}

.btn__note {
	display: block;
	margin-top: 9px;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	color: rgba(255, 255, 255, .72);
}

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

.trust {
	background: var(--glass);
	color: var(--white);
	padding: 16px 0;
}

.trust__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 10px;
}

.trust__item {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
}

.trust__item svg {
	flex: none;
	width: 21px;
	height: 21px;
	stroke: var(--brass);
}

@media (min-width: 560px) {
	.trust__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.sec {
	padding: 46px 0;
}

.sec--tint {
	background: var(--white);
}

.sec--dark {
	background: #17201f;
	color: var(--porcelain);
}

.sec__label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cha);
	margin-bottom: 10px;
}

.sec--dark .sec__label {
	color: var(--brass);
}

.sec h2 {
	font-size: clamp(24px, 6.4vw, 31px);
	text-wrap: balance;
}

.sec__lede {
	margin-top: 14px;
	color: var(--ink-70);
	font-size: 17px;
}

.sec--dark .sec__lede {
	color: rgba(242, 244, 245, .78);
}

/* The gas problem, set as a contrast pair rather than a paragraph. */
.versus {
	margin-top: 26px;
	display: grid;
	gap: 12px;
}

.versus__card {
	padding: 20px;
	border-radius: var(--r-lg);
	background: var(--white);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--porcelain-deep);
}

.versus__card--bad {
	background: #fdf1ec;
	border-color: #f6dbd0;
}

.versus__card--good {
	background: var(--glass-pale);
	border-color: #bfdedc;
}

.versus__head {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 10px;
}

.versus__time {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

.versus__card--bad .versus__time {
	color: var(--cha);
}

.versus__card--good .versus__time {
	color: var(--glass);
}

.versus__time small {
	font-size: 16px;
	font-weight: 600;
	margin-left: 4px;
}

.versus__note {
	margin-top: 8px;
	font-size: 15px;
	color: var(--ink-70);
	line-height: 1.6;
}

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

/* --------------------------------------------------------------------------
   Benefit cards
   -------------------------------------------------------------------------- */

.cards {
	margin-top: 26px;
	display: grid;
	gap: 16px;
}

.card {
	background: var(--white);
	border: 1px solid var(--porcelain-deep);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.card img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--porcelain-deep);
}

.card__body {
	padding: 16px 18px 19px;
}

.card__body h3 {
	font-size: 18px;
}

.card__body p {
	margin-top: 6px;
	font-size: 15.5px;
	color: var(--ink-70);
	line-height: 1.62;
}

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

/* A wide figure used between sections. */
.figure {
	margin-top: 26px;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	background: var(--porcelain-deep);
}

.figure img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.figure__cap {
	padding: 12px 16px;
	background: var(--white);
	font-size: 14px;
	color: var(--ink-45);
}

/* --------------------------------------------------------------------------
   Safety list
   -------------------------------------------------------------------------- */

.safety {
	margin-top: 24px;
	display: grid;
	gap: 12px;
}

.safety__item {
	display: flex;
	gap: 13px;
	padding: 16px 18px;
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .1);
}

.safety__item svg {
	flex: none;
	width: 22px;
	height: 22px;
	stroke: var(--brass);
	margin-top: 3px;
}

.safety__item h3 {
	font-size: 16.5px;
}

.safety__item p {
	margin-top: 3px;
	font-size: 15px;
	color: rgba(242, 244, 245, .72);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Specs
   -------------------------------------------------------------------------- */

.specs {
	margin-top: 22px;
	border: 1px solid var(--porcelain-deep);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--white);
}

.specs__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 18px;
	font-size: 15.5px;
	border-bottom: 1px solid var(--porcelain);
}

.specs__row:last-child {
	border-bottom: 0;
}

.specs__row dt {
	color: var(--ink-45);
	margin: 0;
}

.specs__row dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
	margin-top: 22px;
	display: grid;
	gap: 10px;
}

.faq details {
	background: var(--white);
	border: 1px solid var(--porcelain-deep);
	border-radius: var(--r-md);
	overflow: hidden;
}

.faq summary {
	list-style: none;
	cursor: pointer;
	padding: 15px 48px 15px 18px;
	font-weight: 600;
	font-size: 16.5px;
	position: relative;
	line-height: 1.5;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: '';
	position: absolute;
	right: 20px;
	top: 23px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--cha);
	border-bottom: 2px solid var(--cha);
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.faq details[open] summary::after {
	transform: rotate(-135deg);
	top: 27px;
}

.faq__a {
	padding: 0 18px 17px;
	font-size: 15.5px;
	color: var(--ink-70);
	line-height: 1.68;
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.reviews {
	margin-top: 22px;
	display: grid;
	gap: 12px;
}

.review {
	background: var(--white);
	border: 1px solid var(--porcelain-deep);
	border-radius: var(--r-md);
	padding: 16px 18px;
}

.review__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 7px;
}

.review__who {
	font-weight: 700;
	font-size: 15.5px;
}

.review__date {
	font-size: 13px;
	color: var(--ink-45);
}

.review__stars {
	color: var(--brass);
	letter-spacing: 2px;
	font-size: 15px;
}

.review__text {
	font-size: 15.5px;
	color: var(--ink-70);
	line-height: 1.65;
}

/* Shown until there are real reviews. It never pretends there are any. */
.reviews__empty {
	padding: 22px 20px;
	border-radius: var(--r-md);
	background: var(--brass-pale);
	border: 1px dashed var(--brass);
	text-align: center;
	font-size: 15.5px;
	color: #6b4a29;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Risk reversal steps.

   Numbered because this genuinely is a sequence the customer moves through -
   door, then a week at home, then the claim window - and the order carries
   information they need. The connecting line makes that passage of time visible.
   -------------------------------------------------------------------------- */

.steps {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	position: relative;
}

.step {
	position: relative;
	display: flex;
	gap: 15px;
	padding-bottom: 22px;
}

.step:last-child {
	padding-bottom: 0;
}

/* The thread from one step to the next, stopping at the last badge. */
.step::before {
	content: '';
	position: absolute;
	left: 18px;
	top: 40px;
	bottom: -2px;
	width: 2px;
	background: linear-gradient(180deg, var(--glass-pale), var(--porcelain-deep));
}

.step:last-child::before {
	display: none;
}

.step__no {
	flex: none;
	width: 37px;
	height: 37px;
	border-radius: 50%;
	background: var(--glass);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	position: relative;
	z-index: 1;
	box-shadow: 0 0 0 4px var(--white);
}

.step__body {
	padding-top: 3px;
}

.step__body h3 {
	font-size: 18px;
}

.step__body p {
	margin-top: 6px;
	font-size: 15.5px;
	color: var(--ink-70);
	line-height: 1.68;
}

.step__body strong {
	color: var(--ink);
	font-weight: 700;
}

/* The guarantee itself carries the weight, so it is the one step that is a card. */
.step--hero .step__no {
	background: var(--cha);
}

.step--hero .step__body {
	margin-top: -3px;
	padding: 15px 17px 17px;
	border-radius: var(--r-lg);
	background: var(--glass-pale);
	border: 1px solid #bfdedc;
}

.step--hero .step__body h3 {
	color: var(--glass);
}

.step--hero .step__body p {
	color: #24504e;
}

.step--hero .step__body strong {
	color: #123d3b;
}

/* The unboxing-video ask. Written as the customer's own protection, which is what
   it actually is - the video is what makes their claim impossible to argue with. */
.tipbox {
	margin-top: 22px;
	display: flex;
	gap: 14px;
	padding: 18px;
	border-radius: var(--r-lg);
	background: var(--brass-pale);
	border: 1px solid #e6d0b8;
}

.tipbox svg {
	flex: none;
	width: 26px;
	height: 26px;
	stroke: #9a6a34;
	margin-top: 2px;
}

.tipbox h3 {
	font-size: 16.5px;
	color: #6b4a29;
}

.tipbox p {
	margin-top: 5px;
	font-size: 15px;
	color: #7a5836;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Warranty
   -------------------------------------------------------------------------- */

.warranty {
	margin-top: 26px;
	display: flex;
	gap: 15px;
	padding: 20px;
	border-radius: var(--r-lg);
	background: var(--glass-pale);
	border: 1px solid #bfdedc;
}

.warranty svg {
	flex: none;
	width: 30px;
	height: 30px;
	stroke: var(--glass);
}

.warranty h3 {
	font-size: 18px;
	color: var(--glass);
}

.warranty p {
	margin-top: 6px;
	font-size: 15.5px;
	color: #24504e;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Order form
   -------------------------------------------------------------------------- */

.order {
	background: linear-gradient(180deg, #17201f 0%, #0e1716 100%);
	color: var(--white);
	padding: 46px 0 54px;
}

.order h2 {
	font-size: clamp(25px, 6.6vw, 32px);
	text-align: center;
}

.order__sub {
	margin-top: 10px;
	text-align: center;
	color: rgba(255, 255, 255, .72);
	font-size: 16px;
}

.form {
	margin-top: 24px;
	background: var(--white);
	color: var(--ink);
	border-radius: var(--r-lg);
	padding: 22px 18px 24px;
	box-shadow: var(--shadow-md);
}

.field {
	margin-bottom: 16px;
}

.field > label {
	display: block;
	font-weight: 600;
	font-size: 15.5px;
	margin-bottom: 7px;
}

.field .req {
	color: var(--cha);
}

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 14px 15px;
	border: 1.5px solid #d6dcdd;
	border-radius: var(--r-md);
	background: var(--porcelain);
	font-family: inherit;
	font-size: 16.5px;
	color: var(--ink);
	transition: border-color .14s ease, background .14s ease;
	-webkit-appearance: none;
	appearance: none;
}

.field textarea {
	min-height: 84px;
	resize: vertical;
	line-height: 1.6;
}

.field select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237d736a' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px;
	padding-right: 42px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--glass);
	background: var(--white);
	outline: none;
}

.field.is-bad input,
.field.is-bad select,
.field.is-bad textarea {
	border-color: var(--cha);
	background: #fdf4f1;
}

.field__err {
	display: none;
	margin-top: 6px;
	font-size: 14px;
	color: var(--cha);
	font-weight: 600;
}

.field.is-bad .field__err {
	display: block;
}

.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Quantity stepper */
.qty {
	display: flex;
	align-items: center;
	gap: 0;
	width: 148px;
	border: 1.5px solid #d6dcdd;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--porcelain);
}

.qty button {
	width: 46px;
	height: 50px;
	border: 0;
	background: transparent;
	font-size: 24px;
	font-family: inherit;
	color: var(--glass);
	cursor: pointer;
	line-height: 1;
}

.qty button:disabled {
	color: #b9c1c2;
	cursor: not-allowed;
}

.qty input {
	width: 56px;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	padding: 0;
	-moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* The running total. Shown before the address is typed, on purpose: a cost that
   appears late is the single biggest reason these orders are abandoned. */
.total {
	margin: 20px 0;
	padding: 16px 18px;
	border-radius: var(--r-md);
	background: var(--porcelain);
	border: 1px solid var(--porcelain-deep);
}

.total__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 15.5px;
	padding: 4px 0;
	color: var(--ink-70);
}

.total__row--free span:last-child {
	color: var(--ok);
	font-weight: 700;
}

.total__row--sum {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1.5px solid var(--porcelain-deep);
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
}

.form__cod {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 13px 16px;
	border-radius: var(--r-md);
	background: var(--glass-pale);
	border: 1px solid #bfdedc;
	font-size: 15px;
	font-weight: 600;
	color: #1d4745;
	margin-bottom: 18px;
	line-height: 1.5;
}

.form__cod svg {
	flex: none;
	width: 22px;
	height: 22px;
	stroke: var(--glass);
	margin-top: 2px;
}

.form__cod strong {
	font-weight: 700;
}

.form__error {
	display: none;
	margin-bottom: 16px;
	padding: 13px 16px;
	border-radius: var(--r-md);
	background: #fdf1ec;
	border: 1px solid #f0c4b3;
	color: var(--cha-deep);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
}

.form__error.is-on {
	display: block;
}

.form__fine {
	margin-top: 13px;
	text-align: center;
	font-size: 14px;
	color: var(--ink-45);
	line-height: 1.6;
}

/* Success state replaces the form entirely - so it has to carry the same white card
   the form had, or it inherits the dark section behind it and its body text ends up
   dark-on-dark. */
.done {
	text-align: center;
	background: var(--white);
	color: var(--ink);
	border-radius: var(--r-lg);
	padding: 26px 18px 24px;
	box-shadow: var(--shadow-md);
}

.done {
	margin-top: 24px;
}

.done__tick {
	width: 62px;
	height: 62px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--glass-pale);
	display: flex;
	align-items: center;
	justify-content: center;
}

.done__tick svg {
	width: 32px;
	height: 32px;
	stroke: var(--ok);
}

.done h3 {
	font-size: 23px;
}

.done p {
	margin-top: 10px;
	color: var(--ink-70);
	font-size: 16px;
	line-height: 1.65;
}

/* The three things to do when the courier arrives, set apart from the thanks so they
   are read as instructions rather than skimmed as pleasantries. */
.done__steps {
	margin: 18px 0 4px;
	padding: 16px 16px 14px;
	border-radius: var(--r-md);
	background: var(--glass-pale);
	border: 1px solid #bfdedc;
	text-align: left;
}

.done__steps p {
	margin: 0 0 11px;
	padding-left: 30px;
	position: relative;
	font-size: 15px;
	line-height: 1.6;
	color: #24504e;
}

.done__steps p:last-child {
	margin-bottom: 0;
}

.done__steps span {
	position: absolute;
	left: 0;
	top: 1px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--glass);
	color: var(--white);
	font-size: 12.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.done__steps strong {
	color: #123d3b;
	font-weight: 700;
}

.done__no {
	display: inline-block;
	margin: 16px 0 4px;
	padding: 11px 20px;
	border-radius: var(--r-md);
	background: var(--porcelain);
	border: 1px dashed var(--brass);
	font-size: 18px;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Sticky bar + footer
   -------------------------------------------------------------------------- */

.sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .97);
	border-top: 1px solid var(--porcelain-deep);
	box-shadow: 0 -4px 18px rgba(23, 19, 16, .1);
	transform: translateY(110%);
	transition: transform .24s ease;
}

.sticky.is-on {
	transform: translateY(0);
}

.sticky__price {
	line-height: 1.2;
}

.sticky__now {
	font-size: 21px;
	font-weight: 700;
}

.sticky__was {
	font-size: 13.5px;
	color: var(--ink-45);
	text-decoration: line-through;
	margin-left: 5px;
}

.sticky__free {
	display: block;
	font-size: 12.5px;
	color: var(--ok);
	font-weight: 700;
}

.sticky .btn {
	width: auto;
	flex: 1;
	padding: 14px 18px;
	font-size: 17px;
}

@media (min-width: 1040px) {
	.sticky {
		display: none;
	}
}

.foot {
	background: #0d1413;
	color: rgba(242, 244, 245, .66);
	padding: 34px 0 96px;
	font-size: 14.5px;
	line-height: 1.7;
}

.foot strong {
	color: var(--white);
	display: block;
	font-size: 16px;
	margin-bottom: 8px;
}

.foot a {
	color: var(--brass);
}

.foot__links {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .11);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

@media (min-width: 1040px) {
	.foot {
		padding-bottom: 34px;
	}
}

/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}