@charset "UTF-8";

/* ==========================================================================
   Order screens: "order received" (frames 5356-149 / 5356-381) and the order
   view inside the account (frames 5370-183 / 5370-486).
   Sizes follow the 1528px design frames and scale fluidly between 320px and
   1920px the same way as the rest of the theme.
   ========================================================================== */

.rs-thankyou,
.rs-order-account {
	color: #000000;
	font-family: 'Manrope', sans-serif;
}

/* --------------------------------------------------------------------------
   Hero — "order received" only
   -------------------------------------------------------------------------- */

.rs-thankyou__hero {
	padding: 110px 20px 58px;
	border-bottom: 1px solid #dddddd;
	text-align: center;
}

@media (max-width: 1920px) {
	.rs-thankyou__hero {
		padding-top: calc(48px + (110 - 48) * ((100vw - 320px) / (1920 - 320)));
		padding-bottom: calc(32px + (58 - 32) * ((100vw - 320px) / (1920 - 320)));
	}
}

.rs-thankyou__title {
	margin: 0;
	padding: 0;
	font-size: 55px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: uppercase;
	color: #000000;
}

@media (max-width: 1920px) {
	.rs-thankyou__title {
		font-size: calc(30px + (55 - 30) * ((100vw - 320px) / (1920 - 320)));
	}
}

.rs-thankyou__subtitle {
	margin: 15px 0 0;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.4;
}

@media (max-width: 1920px) {
	.rs-thankyou__subtitle {
		margin-top: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
		font-size: calc(14px + (19 - 14) * ((100vw - 320px) / (1920 - 320)));
	}
}

.rs-thankyou__account {
	margin: 42px 0 0;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.4;
}

@media (max-width: 1920px) {
	.rs-thankyou__account {
		margin-top: calc(22px + (42 - 22) * ((100vw - 320px) / (1920 - 320)));
		font-size: calc(13px + (17 - 13) * ((100vw - 320px) / (1920 - 320)));
	}
}

.rs-thankyou__subtitle a,
.rs-thankyou__account a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rs-thankyou__subtitle a:hover,
.rs-thankyou__account a:hover {
	color: inherit;
	text-decoration: none;
}

.rs-thankyou__actions {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 12px;
	margin: 32px 0 0;
}

/* --------------------------------------------------------------------------
   Delivery panel, shared by both screens
   -------------------------------------------------------------------------- */

.rs-order-note {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 14px;
	margin: 50px 0 0;
	padding: 17px 24px 17px 20px;
	border-radius: 12px;
	background-color: #f5f5f5;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
}

@media (max-width: 1920px) {
	.rs-order-note {
		margin-top: calc(24px + (50 - 24) * ((100vw - 320px) / (1920 - 320)));
		font-size: calc(12px + (15 - 12) * ((100vw - 320px) / (1920 - 320)));
	}
}

/* In the hero the panel is a centred island; in the account it fills the card
   column (frame 5356-149 vs 5370-183). */
.rs-thankyou__hero .rs-order-note {
	max-width: 396px;
	margin-left: auto;
	margin-right: auto;
}

.rs-order-note__icon {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	display: block;
	width: 24px;
	height: 18px;
	margin-top: 2px;
	color: #000000;
}

.rs-order-note__text {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.rs-order-note__text strong {
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Two columns under the hero
   -------------------------------------------------------------------------- */

.rs-thankyou__details {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.rs-thankyou__details > .woocommerce-order-details,
.rs-thankyou__details > .woocommerce-customer-details {
	grid-row: 1;
	margin: 0;
	padding: 58px 28px 66px 24px;
}

@media (max-width: 1920px) {
	.rs-thankyou__details > .woocommerce-order-details,
	.rs-thankyou__details > .woocommerce-customer-details {
		padding-top: calc(32px + (58 - 32) * ((100vw - 320px) / (1920 - 320)));
		padding-bottom: calc(40px + (66 - 40) * ((100vw - 320px) / (1920 - 320)));
		padding-left: calc(16px + (24 - 16) * ((100vw - 320px) / (1920 - 320)));
		padding-right: calc(16px + (28 - 16) * ((100vw - 320px) / (1920 - 320)));
	}
}

.rs-thankyou__details > .woocommerce-order-details {
	-ms-grid-column: 1;
	grid-column: 1;
}

.rs-thankyou__details > .woocommerce-customer-details {
	-ms-grid-column: 2;
	grid-column: 2;
	border-left: 1px solid #dddddd;
}

/* Payment gateways hook their own markup into woocommerce_thankyou; keep it
   out of the two-column band. */
.rs-thankyou__details > *:not(.woocommerce-order-details):not(.woocommerce-customer-details) {
	grid-column: 1 / -1;
	padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Titles
   -------------------------------------------------------------------------- */

.rs-order__title {
	margin: 0;
	padding: 0;
	font-size: 40px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: #000000;
}

@media (max-width: 1920px) {
	.rs-order__title {
		font-size: calc(19px + (40 - 19) * ((100vw - 320px) / (1920 - 320)));
	}
}

.rs-order__number {
	color: #b3b3b3;
}

.rs-order__title--shipping {
	margin-top: 40px;
}

/* --------------------------------------------------------------------------
   Order card
   -------------------------------------------------------------------------- */

.rs-order-card {
	margin: 28px 0 0;
	padding: 0 28px;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
}

@media (max-width: 1920px) {
	.rs-order-card {
		margin-top: calc(16px + (28 - 16) * ((100vw - 320px) / (1920 - 320)));
		padding-left: calc(16px + (28 - 16) * ((100vw - 320px) / (1920 - 320)));
		padding-right: calc(16px + (28 - 16) * ((100vw - 320px) / (1920 - 320)));
	}
}

.rs-order-card__section,
.rs-order-card__row {
	padding: 19px 0;
	border-top: 1px solid #eeeeee;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.35;
}

@media (max-width: 1920px) {
	.rs-order-card__section,
	.rs-order-card__row {
		padding-top: calc(14px + (19 - 14) * ((100vw - 320px) / (1920 - 320)));
		padding-bottom: calc(14px + (19 - 14) * ((100vw - 320px) / (1920 - 320)));
		font-size: calc(13px + (16 - 13) * ((100vw - 320px) / (1920 - 320)));
	}
}

.rs-order-card > *:first-child {
	border-top: 0;
}

.rs-order-card__row,
.rs-order-item {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: minmax(0, 1.6fr) 16px minmax(0, 1fr);
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 16px;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: start;
}

.rs-order-card__label {
	color: #000000;
}

.rs-order-card__value {
	color: #000000;
	word-break: break-word;
}

.rs-order-card__value .shipped_via,
.rs-order-card__value small {
	display: inline;
	color: #8c8c8c;
	font-size: 0.87em;
}

.rs-order-card__value p {
	margin: 0;
}

/* Items ------------------------------------------------------------------ */

.rs-order-card__caption {
	color: #000000;
}

.rs-order-item {
	margin-top: 14px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.rs-order-item__product {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 20px;
	min-width: 0;
}

.rs-order-item__thumb {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 59px;
}

@media (max-width: 1920px) {
	.rs-order-item__thumb {
		width: calc(48px + (59 - 48) * ((100vw - 320px) / (1920 - 320)));
	}
}

.rs-order-item__thumb a {
	display: block;
}

/* No forced ratio: the store's woocommerce_thumbnail size already crops every
   product image the same way. */
.rs-order-item__thumb img,
.rs-order-item__img {
	display: block;
	width: 100%;
	height: auto;
	background-color: #f5f5f5;
}

.rs-order-item__info {
	min-width: 0;
}

.rs-order-item__name a {
	color: inherit;
	text-decoration: none;
}

.rs-order-item__name a:hover {
	color: inherit;
	text-decoration: underline;
}

.rs-order-item__name .product-quantity {
	font-weight: 400;
	white-space: nowrap;
}

.rs-order-item__meta {
	margin-top: 4px;
	font-size: 0.87em;
	line-height: 1.3;
}

.rs-order-item__meta-item {
	display: block;
}

.rs-order-item__meta p {
	display: inline;
	margin: 0;
}

.rs-order-item__purchase-note {
	padding-bottom: 19px;
	font-size: 0.87em;
}

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

.rs-order__again,
.rs-order__actions {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 12px;
	margin: 33px 0 0;
	padding: 0;
}

@media (max-width: 1920px) {
	.rs-order__again,
	.rs-order__actions {
		margin-top: calc(20px + (33 - 20) * ((100vw - 320px) / (1920 - 320)));
	}
}

.rs-order__btn {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 10px;
	min-width: 286px;
	height: 59px;
	padding: 0 28px;
	border: 1px solid #d9d9d9;
	border-radius: 100px;
	background-color: transparent;
	color: #000000;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 2.6px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-transition: border-color 0.3s ease 0s, background-color 0.3s ease 0s, color 0.3s ease 0s;
	-o-transition: border-color 0.3s ease 0s, background-color 0.3s ease 0s, color 0.3s ease 0s;
	transition: border-color 0.3s ease 0s, background-color 0.3s ease 0s, color 0.3s ease 0s;
}

@media (max-width: 1920px) {
	.rs-order__btn {
		min-width: calc(200px + (286 - 200) * ((100vw - 320px) / (1920 - 320)));
		height: calc(48px + (59 - 48) * ((100vw - 320px) / (1920 - 320)));
		font-size: calc(11px + (14 - 11) * ((100vw - 320px) / (1920 - 320)));
		letter-spacing: calc(2px + (2.6 - 2) * ((100vw - 320px) / (1920 - 320)));
	}
}

.rs-order__btn:hover,
.rs-order__btn:focus {
	border-color: #000000;
	color: #000000;
	text-decoration: none;
}

.rs-order__btn-icon {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	display: block;
	width: 16px;
	height: 16px;
}

.rs-order__btn--pay {
	border-color: #000000;
	background-color: #000000;
	color: #ffffff;
}

.rs-order__btn--pay:hover,
.rs-order__btn--pay:focus {
	background-color: #333333;
	border-color: #333333;
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   Account screen
   -------------------------------------------------------------------------- */

.rs-order-account {
	max-width: 682px;
	padding-bottom: 66px;
}

@media (max-width: 1920px) {
	.rs-order-account {
		padding-bottom: calc(40px + (66 - 40) * ((100vw - 320px) / (1920 - 320)));
	}
}

.rs-order-account__meta {
	margin: 12px 0 0;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.4;
}

@media (max-width: 1920px) {
	.rs-order-account__meta {
		font-size: calc(13px + (17 - 13) * ((100vw - 320px) / (1920 - 320)));
	}
}

.rs-order-account__meta strong {
	font-weight: 700;
}

.rs-order-account .woocommerce-order-details {
	margin: 0;
}

.rs-order-account__updates-title {
	margin: 40px 0 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
}

.rs-order-account__updates {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.rs-order-account__update {
	padding: 16px 0;
	border-top: 1px solid #eeeeee;
}

.rs-order-account__update-date {
	margin: 0 0 6px;
	font-size: 13px;
	color: #8c8c8c;
}

.rs-order-account__update-text p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.rs-thankyou__details {
		-ms-grid-columns: minmax(0, 1fr);
		grid-template-columns: minmax(0, 1fr);
	}

	.rs-thankyou__details > .woocommerce-order-details,
	.rs-thankyou__details > .woocommerce-customer-details {
		-ms-grid-column: 1;
		grid-column: 1;
		grid-row: auto;
	}

	.rs-thankyou__details > .woocommerce-customer-details {
		padding-top: 0;
		border-left: 0;
	}
}

@media (max-width: 767px) {
	.rs-order-card__row,
	.rs-order-item {
		-ms-grid-columns: minmax(0, 1fr) 12px minmax(0, 1.35fr);
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
		gap: 12px;
	}

	/* Frame 5356-381: thumbnail on the left, name / size / price stacked next
	   to it. display:contents lifts the thumbnail and the text out of their
	   wrapper so the price can sit under the text, not under the image. */
	.rs-order-item {
		-ms-grid-columns: auto 14px minmax(0, 1fr);
		grid-template-columns: auto minmax(0, 1fr);
		gap: 6px 14px;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: start;
	}

	.rs-order-item__product {
		display: contents;
	}

	.rs-order-item__total {
		grid-column: 2;
	}

	.rs-order__btn {
		width: 100%;
		min-width: 0;
	}
}