:root {
  --color--bg: #ededee;
}

.rl-uploader, .uploadcare-config {
	--uc-font-family: var(--font-sans);
	--uc-simple-btn-font-family: var(--font-sans);
	--uc-radius: 4px;
	font-variant: lining-nums;
}

.return-portal {
  min-height: 82vh;
}

.return--intro p {
	font-size: 15px;
}
.past-returns--guest {
	text-align: center;
	margin-top: 12px;
}
.past-returns--guest p {
	font-size: 13px;
	margin: 0 0 4px 0;
	color: var(--color-gray);
}
.return-portal a {
  text-decoration: underline;
  color: inherit;
}

.return-portal > header {
  margin: 0 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.return-portal header h1 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 2.5vw, 36px);
  margin: 0;
  line-height: 1.2;
}
	
.returns__statement {
  font-size: 15px;
  max-width: 80ch;
}    
	
.past-returns {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.past-returns--empty {
  border: 1px dashed var(--color-gray);
  text-align: center;
  padding: 48px 20px;
  border-radius: 6px;
  margin: 16px 0;
}
.return-opts .past-returns--empty {
  padding-top: 64px;
  padding-bottom: 64px;
  margin-bottom: 32px;
}
.past-returns--empty p {
  margin: 0;
  font-size: 15px;
}
.past-returns--empty ~ .returns__footnote {
	text-align: left;
	margin-top: 8px;
	color: var(--color-gray);
}
.past-returns--signin {
	padding: 48px 24px 24px;
	background: white;
	border: none;
}
.past-returns--signin .btn {
	margin-top: 32px;
}
.past-return {
  background: white;
  padding: 16px;
  display: grid;
  grid-template-columns: 95px 1fr;
  gap: 16px;
  font-size: 13px;
  border-radius: calc(var(--btn-radius) + 1px);
}
.past-return[data-status="Closed"] {
  background: rgba(255,255,255,.5);
}
.past-return img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: var(--btn-radius);
  aspect-ratio: 3 / 4;
  object-fit: contain;
}
.past-return p {
  margin: 0;
}
.past-return ul {
  border-top: 1px dashed #ccc;
  margin: 8px 0 0;
  padding: 8px 0 0;
  list-style: none;
  display: flex;
  gap: 16px;
}
.past-return li {
  min-width: 100px;
}
.past-return li span {
  display: block;
}
.past-return li span:first-child {
  font-size: 11px;
  color: var(--color-gray-light);
}
.rtrn__info > span:first-child {
  display: block;
  margin-bottom: 2px;
}
.rtrn__info__meta {
  font-size: 13px;
  color: var(--color-gray-light);
}
 
.past-return > div {
  order: 2;
}
 
.rtrn__status {
  order: 1!important;
  text-align: right;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  align-self: stretch;
  grid-column: span 2;
} 
.rtrn__status__badge {
  border-radius: 72px;
  border: 1px solid rgba(0,0,0,0.20);
  background: #F8F8F8;
  display: flex;
  padding: 8px 12px 8px 8px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  
  color: #000;
  leading-trim: both;
  text-edge: cap;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 135%; /* 15.525px */
  letter-spacing: 0.805px;
  text-transform: uppercase;
  
}
	
.rtrn__status__badge__check {
  display: none;
}    
[data-status="Open"] .rtrn__status__badge svg {
  fill: #80B088;
}
[data-status="Closed"] .rtrn__status__badge svg {
  fill: #aaa;
}
[data-status="Closed"] .rtrn__status__badge {
  border: 1px solid rgba(0,0,0,0.1);
  color: rgba(0,0,0,.6);
}
[data-status="Closed"] .rtrn__status__badge__check {
  display: block;
}
[data-status="Pending"] .rtrn__status__badge svg {
  fill: #F0C064;
}

.rtrn__status__date {
  line-height: 1.4;
  color: var(--color-gray-light);
  font-size: 12px;  
}
 

.returns {
	--opt-padding: 13px 18px 13px 18px;
	--opt-font-size: 16px;
	--opt-border-color: #ccc;
	--opt-border-color-hover: #aaa;
	--opt-border-color-active: #000;
	--opt-color-info-bg: #F6F6F6;
	--rl-color-bg: #fff;
	container-type: inline-size;
	--drawer-maxw: 600px;
}

.returns.product__drawer {
  top: 0;
  inset: 0 0 0 0;
}

.returns .product__drawer__bg {
  backdrop-filter: blur(1px);
  background: rgba(200,200,200,0.85);
}


/* TEMP */
/* .return {
	resize: horizontal;
	overflow: auto;
	height: 90vh;
	border: 1px dashed #777;
	margin: 6rem auto;
	width: 550px;
	min-width: 420px;
	max-width: 860px;
} */

/* .return__header, .return__body {
	padding-left: 24px;
	padding-right: 24px;
} */

.return__body--restricted {
  padding: 64px 0;
}
.return__body--restricted p {
  font-size: 15px;
  max-width: 45ch;
  margin-bottom: 24px;
}
.return__body--restricted p .btn {
  color: white;
  text-decoration: none;
}

.returns .return__header {
	margin: 0;
	padding: 0 0 16px;
	border-bottom: 1px solid rgba(0,0,0,.2);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.return__footer {
	position: sticky;
	bottom: 0;
	padding: 0;
	background: white;
	visibility: hidden;
	opacity: 0;
	transform: translateY(100%);
	transition: .15s ease;
}
.return__footer.is-visible {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}
.product__drawer__title span {
  margin-right: 8px;
}
.item-is-selected .product__drawer__title span:first-child {
  cursor: pointer;
}
.item-is-selected .product__drawer__title span:first-child:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-style: dashed;
  text-decoration-color: var(--color-gray);
}
.product__drawer__title span svg {
  position: relative;
  top: 1px;
}

.return__page {
  /* min-height: calc(100vh - 240px); */
  min-height: calc(100vh - 350px);
}
.return__page[data-pg="review"] {
  min-height: calc(100vh - 190px);
}
.return__page[data-pg="choose"], .return__page[data-pg="review"], .return__page[data-pg="completed"] {
  margin-top: 24px;
}

.return__header > div:last-child {
  display: flex;
  align-items: center;
}

.return__progress {
  display: flex;
  align-items: center;
  margin-right: 8px;
  margin-top: -2px;
  font-size: 11px;
  color: var(--color-gray);
  opacity: 0;
  visibility: hidden;
  transition: .15s ease;
}
.return__progress svg {
  margin: -9px 0;
}
.return__progress svg circle {
  transition: stroke-dashoffset .15s ease;
}
.return__progress.is-visible {
  opacity: 1;
  visibility: visible;
}

.returns h2 {
	font-size: 26px;
	margin-bottom: 24px;
}

.return-opts__order {
  margin-bottom: 32px;
}
.return-opts__order, .return-opts__order__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.return-opts__order__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 4px;
}
.return-opts__order__header span:last-child {
  font-size: 12px;
  margin-left: 4px;
  color: var(--color-gray-light);
}
.return-opts__order__header > span:last-child {
  font-size: 11px;
  border-radius: 100px;
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: #F5F5F5;
}

.returns__footnote {
  text-align: center;
  color: var(--color-gray-light);
}
.returns__footnote p {
  margin: 0 auto 2px;
  font-size: 13px;
}
.form__q .returns__footnote {
  margin-top: 32px;
}

.quick-links {
  border-top: 1px solid rgba(0,0,0,.15);
  margin-top: 96px;
  padding: 24px 0;
  display: flex;
  gap: 24px;
  font-size: 13px;
}
.quick-links a {
  color: var(--color-gray-light);
  text-decoration: underline;
}

.return__footer > div {
	display: flex;
	padding: 16px 0;
	gap: 16px;
	border-top: 1px solid rgba(0,0,0,.5);
}
.return__footer button {
	flex: 1;
	min-height: 48px;
	transition: .15s ease;
}
.return__footer .btn-secondary {
	max-width: 64px;
}
.return-prod > div {
	display: grid;
	align-items: center;
	grid-template-columns: 70px 1fr;
	gap: 16px;
	padding: 16px 0;
	font-size: 13px;
	border-bottom: 1px solid rgba(0,0,0,.2);
}
.return-prod > div > div {
  overflow-x: hidden;
}
.return-prod img {
	width: 70px;
	height: auto;
	border-radius: var(--btn-radius);
	aspect-ratio: 3 / 4;
}
.return-prod > div > div span {
	display: block;
	line-height: 1.55;
	margin-bottom: 2px;
}
.return-prod div span i {
  font-style: normal;
}

.return-prod span:not(:first-child) {
  color: var(--color-gray-light);
}
.return-prod ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
:is(.return-prod--selected, .return-prod--review, .return-prod--completed) span:not(:first-child) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.return-prod--review ul li {
	display: grid;
	align-items: baseline;
	grid-template-columns: 85px 1fr;
	border-bottom: 1px solid rgba(0,0,0,.1);
	padding: 12px 0;
}
.return-prod--completed ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	border-top: 1px dashed rgba(0,0,0,.2);
	margin: 8px 0 0 0;
	padding: 8px 0 0 0;
}
.return-prod ul li span:first-child {
	color: var(--color-gray-light);
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.return-prod--review ul li svg {
  display: inline-block;
  margin: 0 6px;
}
.return-prod--review .responses {
  margin-top: 12px;
}

:is(.return-prod--button, .return-prod--review, .return-prod--completed) > div {
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 6px;
  padding: 12px;
  position: relative;
}
.form__opt--button > span {
  position: relative;
}

.return-prod--button > div {
  padding: 12px 44px 12px 12px;
  cursor: pointer;
}

.return-prod--button > div::after, .form__opt--button > span::after {
	content: '';
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	height: 18px;
	width: 10px;
	background: var(--icon-caret-right) no-repeat center center / 10px 18px;
	opacity: 0.5;
}

.form__opt--button > span::after {
	height: 13px;
	width: 8px;
	background: var(--icon-caret-right) no-repeat center center / 8px 13px;
}

.return-prod--button:hover > div {
  border: 1px solid rgba(0,0,0,.4);
  background: rgb(253,253,253);
}
.return-prod--button:hover > div::after {
	opacity: 0.8;
}

.form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 24px 0;
}
.form__q > .sub__actions {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
}
.sub__actions p {
  text-align: right;
  color: var(--color-gray-light);
  font-size: 13px;
  margin: 0;
}
.form__back {
	background: none;
	text-align: left;
	font-size: 19px;
	display: flex;
	color: #444;
	align-items: center;
	padding: 1px 0 16px;
	margin: 0 0 16px 0;
}
.form__back::before {
	content: '';
	transform: scaleX(-100%);
	margin-left: 0px;
	margin-right: 16px;
	height: 17px;
	width: 11px;
	min-width: 11px;
	background: var(--icon-caret-right) no-repeat center center / 75%;
	opacity: 0.5;
}
.form__q:not(:empty) {
  margin-bottom: 64px;
}
.form__q:empty {
  display: none;
}
.form__q > div, .form__q__subs ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
} 
.form__q p + div {
  margin-top: 24px;
}
.form__opt {
	width: 100%;
	background: none;
	margin: 0;
	padding: 0;
	position: relative;
}
.inset.form__opt {
	margin-left: 3rem;
}
.form__opt > span {
	background: white;
	text-align: left;
	border: 1px solid #ccc;
	padding: var(--opt-padding);
	min-height: 54px;
	font-size: var(--opt-font-size);
	line-height: 1.55;
	border-radius: calc(var(--btn-radius) + 1px);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	position: relative;
}
.form__opt--secondary > span {
	background: var(--opt-color-info-bg);
	border-color: transparent;
	font-size: calc(var(--opt-font-size) - 2px);
}
.form__opt:hover > span {
	border-color: var(--opt-border-color-hover);
}
.form__opt[disabled] > span, .form__opt input[disabled] + span {
	border-color: var(--opt-border-color);
	opacity: 0.5;
	pointer-events: none;
}
.form__opt > input {
	opacity: 0;
	position: absolute;
	left: -4rem;
	top: auto;
}
.form__opt :checked + span {
	border-color: var(--opt-border-color-active);
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
	color: var(--color-primary);
}
.form__opt.has-sub :checked + span {
	border-bottom-color: rgba(0, 0, 0, 0.3);
	border-radius: 4px 4px 0 0;
}

.form__opt:focus-visible > span, .form__opt :focus-visible + span {
	box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 0 1px 4px #005FCC;
}

.form__opt__help {
  /* display: block; */
  font-size: 13px;
  color: var(--color-gray-light);
  margin-top: 1px;
  display: list-item;
  list-style-type: "\00B7";
  padding-left: 0.5em;
}
.form__opt span ul {
  padding: 0 0 0 0.125em;
  margin: 6px 0 0 0;
  list-style: decimal;
}
.form__opt span ul li+li {
  margin-top: 2px;
}
i.form__opt__help {
  display: block;
  padding-left: 0;
}
.form__opt:hover .form__opt__help {
  color: var(--color-gray);
}

.form__opt .other-text {
	background: var(--opt-color-info-bg);
	padding: 16px 12px 12px 18px;
	border: 1px solid var(--opt-border-color);
	border-radius: 0 0 4px 4px;
	margin-top: -4px;
	display: none;
}
.form__opt .other-text p {
	margin: 0;
	font-size: 13px;
	color: var(--color-gray);
}
.form__opt textarea, .subs textarea {
	display: block;
	padding: 12px;
	margin: 0;
	width: 100%;
	font-size: 14px;
	border: 1px solid var(--opt-border-color);
	border-radius: calc(var(--btn-radius) + 2px);
	height: 2lh;
}
.subs .txt textarea {
  min-height: 120px;
  background: #FCFCFC;
}

.form__opt:not(button, .form__opt--button) > span::before {
	content: '';
	border: 1px solid var(--opt-border-color);
	border-radius: calc(var(--btn-radius) + 1px);
	height: 20px;
	width: 20px;
}

.form__opt:not(button) [type="radio"] + span::before {
	border-radius: 50%;
}
.form__opt:not(button) :checked + span::before {
	border-color: var(--opt-border-color-active);
	background: var(--opt-border-color-active) var(--icon-corner-check) no-repeat center center / 57%;
}
.form__opt:not(button) [type="radio"]:checked + span::before {
	background: white;
	box-shadow: inset 0 0 0 5px black;
}
.form__opt:not(button) :checked + span + .other-text {
	display: block;
	border-color: var(--opt-border-color-active);
}
.form__q__subs ul .txt > label {
  display: block;
  font-size: 15px;
  margin-bottom: 16px;
}

button.form__opt > span::after {
	content: '';
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	height: 12px;
	width: 6px;
	background: var(--icon-caret-right) no-repeat center center;
}

[data-pg^="formWash"] p, [data-pg^="formWash"] li {
  font-size: 15px;
  line-height: 1.55;
}
[data-pg="formWash2"] ul {
  padding-left: 24px;
}
[data-pg="formWash2"] li+li {
  margin-top: 8px;
}
[data-pg^="formWash"] > div > button {
  display: block;
  width: 100%;
  --btn-padding: 14px 20px;
  margin-top: 24px;
}

[data-pg="completed"] h2, [data-pg^="formWash"] h2 {
  display: flex;
  align-items: center;
  gap: 12px;
}
[data-pg="completed"] h2 svg path.path1 {
  stroke-dasharray: 58;
  stroke-dashoffset: 58;
  animation: dash1 0.4s ease forwards 0.15s;
}
[data-pg="completed"] h2 svg path.path2 {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: dash2 0.5s ease forwards 0.3s;
}
@keyframes dash1 {
  to {
	stroke-dashoffset: 3;
  }
}
@keyframes dash2 {
  to {
	stroke-dashoffset: 41;
  }
}

.return__next-steps {
	margin-top: 16px;
	padding: 24px 20px 16px 48px;
	border-radius: calc(var(--btn-radius) + 1px);
	background: var(--opt-color-info-bg);
}
.return__next-steps ol {
	margin: 0;
	padding: 0;
	font-size: var(--pdp-font-size-md);
}
.return__next-steps li p {
	font-size: var(--pdp-font-size-md);
	line-height: 1.55;
}
.return__next-steps li ~ li {
	margin-top: 24px;
}
.return__next-steps .btn {
	width: 100%;
	margin: 16px 0;
}
.return__next-steps h3 {
  font-size: 13px;
  letter-spacing: var(--type--caps-tracking);
  text-transform: uppercase;
}
.return__complete-actions {
  border-top: 1px solid rgba(0,0,0,.2);
  margin-top: 32px;
  padding: 32px 0;
  display: flex;
  justify-content: space-between
}

.pre__response {
  position: fixed;
  left: 2rem;
  top: 6rem;
  font-size: 10px;
  display: none;
}

@container (min-width: 600px) {
	.returns h2 {
		font-size: 26px;
	}
}

.btn-red {
  background-color: #993300;
}

@media(min-width: 851px) {
  .past-return {
	grid-template-columns: 95px 1fr 100px;
  }
  .rtrn__status {
	text-align: right;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	align-self: stretch;
	grid-column: span 1;
  }
  .past-return > div {
	order: 1;
  }
  .rtrn__status {
	order: 2!important;
  }
}

@media (min-width: 851px) {
	.return--intro {
		margin-top: 80px;
	}
}
@media (min-width: 1240px) {
	.return--intro {
		margin-left: 15%;
		margin-right: 15%;
	}
}