@charset "UTF-8";
:root {
  --bg: #fff;
  --modal: #fff;
  --border: #eee;
  --heading: #000;
  --color: #000b;
  --shade: #f3f5f7;
  --shade2: #eaedf0;
  --subtle: #999;
  --white: #fff;
  --red: #fd6a51;
  --orange: #fd6a51;
  --yellow: #fa1;
  --green: #8acc46;
  --blue: #00bfb3;
  --purple: #8872cd;
  --navy: #213d71;
  --black: #000;
  --white: #fff;
  --border: #e1e4e8;
  --xs: 14px;
  --sm: 16px;
  --base: 18px;
  --md: 21px;
  --lg: 28px;
  --xl: 36px;
  --xxl: 48px;
  --font: 'cs-sans', sans-serif;
  --font-serif: 'Fraunces', serif;
  --mono: 'JetBrains Mono', monospace;
  --lineheight: clamp(0px,calc(.625rem + .875em),1.5em);
  --shadow: 0 5px 20px rgba(0,20,40,.05), 0 0 0 1px rgba(0,20,40,.025);
  --shadow-light: 0 0 0 1px var(--border-light);
  --shadow-dark: 0 0 0 1px #bbb;
  --shadow-lg: 0 8px 40px rgba(0,20,40,.025), 0 6px 30px rgba(0,20,40,.025), 0 4px 20px rgba(0,20,40,.025);
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 24px;
  --control: 44px;
  --control-pad: 20px;
  --control-lg: 64px;
  --control-lg-pad: 28px;
  --icon: 24px;
  --ratio: 1;
  --page: calc(min(100vw,1536px));
  --gutter-x: calc( (100vw - var(--page) )/2 + var(--gap) );
  --gutter-y: clamp(48px,var(--gutter-x),96px);
  --space: 6px;
  --pad: 32px;
  --gap: 64px;
  --gap-sm: 24px;
  --margin: 0.5em;
  --margin-lg: 2em;
  --indent: 2em;
  --grid-gap: 12px;
  --grid-ratio: 1;
  --subtle: #666;
  --outline: 0 0 0 1px rgba(0,0,0,.125), 0 2px 4px -2px rgba(0,0,0,.2);
  --focus: var(--orange);
  --layout-transition: all .25s ease-in-out;
  --element-transition: all .25s cubic-bezier(.25,0,0,1);
  --shadow: 0 6px 24px -6px rgba(0,0,0,0.05), 0 4px 16px -4px rgba(0,0,0,.05);
}
@media (max-width: 959px) {
  :root {
    --xs: 12px;
    --sm: 12px;
    --base: 14px;
    --md: 16px;
    --lg: 21px;
    --xl: 28px;
    --xxl: 28px;
    --indent: 1.5em;
    --gap: 24px;
    --pad: 24px;
  }
}

.size-web {
  --margin: 0.5em;
  --xs: 12.5px;
  --sm: 13px;
  --base: 14px;
  --md: 16px;
  --lg: 18px;
  --xl: 22px;
  --xxl: 28px;
  --control-lg: 56px;
  --control-lg-pad: 24px;
  --control-pad: 16px;
}
@media (min-width: 960px) {
  .size-web {
    --xs: 12px;
    --sm: 13.5px;
    --base: 15px;
    --lg: 22px;
    --xl: 32px;
    --xxl: 44px;
  }
}

*, *:before, *:after {
  position: relative;
  list-style-type: none;
  box-sizing: border-box;
  background-color: transparent;
  -webkit-appearance: none;
  vertical-align: baseline;
  scroll-behavior: smooth;
  text-decoration: none;
  font-weight: inherit;
  font-family: inherit;
  font-style: inherit;
  font-size: 100%;
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
  text-align: inherit;
}

html {
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

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

@font-face {
  font-family: 'cs-sans';
  font-weight: 400;
  font-style: normal;
  src: url("/assets/fonts/cs-sans/CSSans-Regular.otf") format("opentype");
}
@font-face {
  font-family: 'cs-sans';
  font-weight: 400;
  font-style: oblique;
  src: url("/assets/fonts/cs-sans/CSSans-Italic.otf") format("opentype");
}
@font-face {
  font-family: 'cs-sans';
  font-weight: 550;
  font-style: normal;
  src: url("/assets/fonts/cs-sans/CSSans-Demi.otf") format("opentype");
}
@font-face {
  font-family: 'cs-sans';
  font-weight: 550;
  font-style: oblique;
  src: url("/assets/fonts/cs-sans/CSSans-DemiItalic.otf") format("opentype");
}
@font-face {
  font-family: 'cs-sans';
  font-weight: 700;
  font-style: normal;
  src: url("/assets/fonts/cs-sans/CSSans-Bold.otf") format("opentype");
}
@font-face {
  font-family: 'cs-sans';
  font-weight: 700;
  font-style: oblique;
  src: url("/assets/fonts/cs-sans/CSSans-BoldItalic.otf") format("opentype");
}
@font-face {
  font-family: 'cs-sans-soft';
  font-weight: 400;
  font-style: normal;
  src: url("/assets/fonts/cs-sans/CSSans-Soft.otf") format("opentype");
}
@font-face {
  font-family: 'cs-sans-soft';
  font-weight: 400;
  font-style: oblique;
  src: url("/assets/fonts/cs-sans/CSSans-SoftItalic.otf") format("opentype");
}
@font-face {
  font-family: 'cs-sans-soft';
  font-weight: 700;
  font-style: normal;
  src: url("/assets/fonts/cs-sans/CSSans-SoftBold.otf") format("opentype");
}
@font-face {
  font-family: 'cs-sans-soft';
  font-weight: 700;
  font-style: oblique;
  src: url("/assets/fonts/cs-sans/CSSans-SoftBoldItalic.otf") format("opentype");
}
[class*="theme-"] {
  background: var(--bg) !important;
  color: var(--color) !important;
}

.theme-dark {
  --bg: #000;
  --border: #222;
  --color: #fff;
  --shade: #151515;
  --shade2: #222;
  --subtle: #999;
  --white: #fff;
  --heading: #fff;
}
.theme-red {
  --bg: #d03d24;
  --color: white;
}
.theme-orange {
  --bg: #d03d24;
  --color: white;
}
.theme-yellow {
  --bg: #b15a00;
  --color: white;
}
.theme-green {
  --bg: #3f8100;
  --color: white;
}
.theme-blue {
  --bg: #008074;
  --color: white;
}
.theme-purple {
  --bg: #7963be;
  --color: white;
}
.theme-red-tint {
  --bg: #fff6f5;
  --color: #d03d24;
}
.theme-orange-tint {
  --bg: #fff6f5;
  --color: #d03d24;
}
.theme-yellow-tint {
  --bg: #fff6eb;
  --color: #b15a00;
}
.theme-green-tint {
  --bg: #f3faed;
  --color: #81892b;
}
.theme-blue-tint {
  --bg: #edfbfa;
  --color: #008074;
}
.theme-purple-tint {
  --bg: #f8f7fc;
  --color: #7963be;
}

.shade {
  background: #f5f5f5;
  --shade: var(--bg) ;
}

.color-white {
  color: white;
}

html {
  font-size: var(--base);
}

body {
  font-family: var(--font);
  font-size: var(--base);
  color: var(--color);
  background: var(--bg);
}

* {
  line-height: var(--lineheight);
}
*:first-child {
  margin-top: 0 !important;
}
*:last-child {
  margin-bottom: 0 !important;
}

h1, .h1 {
  font-size: var(--xl);
}

h2, .h2 {
  font-size: var(--xl);
}

h3, .h3 {
  font-size: var(--lg);
}

h4, .h4 {
  font-size: var(--md);
}

h5, .h5 {
  font-size: var(--base);
}

h6, .h6 {
  font-size: var(--sm);
}

h1, h2, h3, h4, h5, h6, strong, .bold {
  font-weight: 600;
  color: var(--heading);
}

h1, h2, h3, h4, h5, h6, p, ul, ol, table, blockquote, small {
  margin-block: var(--margin);
}

h1, h2, h3, h4, h5, h6 {
  margin-top: var(--margin-lg);
}

blockquote {
  font-size: var(--xl);
  border-radius: var(--radius);
  padding: calc(var(--gap) * 2);
  background: #000;
  color: #fff;
  margin-block: var(--gap);
}

hr {
  height: 6px;
  background: var(--yellow);
  border-radius: 100px;
  margin: 3em 0;
  max-width: 20%;
}

a {
  color: inherit;
  cursor: pointer;
}

em {
  font-style: italic;
}

small {
  display: block;
  line-height: 1.25;
  font-size: var(--sm);
}

ul, ol {
  padding-left: var(--indent);
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  list-style-type: inherit;
}

:is(ul, ol) :is(ul, ol) {
  margin-block: 0;
}

s {
  text-decoration: line-through;
}

code {
  font-family: var(--mono);
  font-size: .9375em;
}

mark {
  color: var(--color);
}

del {
  text-decoration: line-through;
}

.link {
  color: var(--link);
}

.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-xs {
  font-size: var(--xs) !important;
}
.text-sm {
  font-size: var(--sm) !important;
}
.text-base {
  font-size: var(--base);
}
.text-md {
  font-size: var(--md);
}
.text-lg {
  font-size: var(--lg);
}
.text-xl {
  font-size: var(--xl);
}
.text-xxl {
  font-size: var(--xxl);
}
.text-normal {
  font-weight: normal !important;
}
.text-demi {
  font-weight: 550 !important;
}
.text-bold {
  font-weight: bold !important;
}
.text-lower {
  text-transform: lowercase;
}

.action:after {
  content: '⌃';
  display: inline-block;
  transform: rotate(90deg) translate(5%);
}

.more {
  display: inline-block;
  font-weight: 600;
  margin-top: 16px;
}

.text-address {
  white-space: pre-line;
}

.subtle {
  color: color-mix(in srgb, currentColor, transparent);
}

.arrow:after {
  content: ' ›';
}

[style*="--before:"]:before {
  content: var(--before);
}

.faint {
  opacity: .666;
}

.serial {
  --serial: ' •';
}
.serial > *:not(:last-child):after {
  content: var(--serial);
  margin-inline: .25em;
}
.serial-slash {
  --serial: ' /';
}

.capitalize {
  text-transform: capitalize;
}

.chart {
  margin: 3em 0;
}

img, video {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.ratio-square {
  aspect-ratio: 1;
}
.ratio-tall {
  aspect-ratio: 9/16;
}
.ratio-tallish {
  aspect-ratio: 3/4;
}
.ratio-wide {
  aspect-ratio: 16/9;
}
.ratio-wideish {
  aspect-ratio: 4/3;
}

.background, .background img {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
}

.image-shade {
  border-radius: var(--radius-lg);
  background: var(--shade);
}
.image-shade img {
  mix-blend-mode: multiply;
}

.image-labels {
  position: absolute;
  top: var(--grid-gap);
  left: var(--grid-gap);
  right: var(--grid-gap);
  bottom: var(--grid-gap);
}

.icon {
  font-size: var(--icon);
  width: 1em;
  height: 1em;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  stroke-width: 2;
  fill: none;
  top: -1px;
}
.icon use {
  fill: inherit;
  stroke-width: inherit;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
  stroke: currentColor;
}
.icon-sm {
  font-size: 18px;
}
.icon-xs {
  font-size: 12px;
}
.icon-fill {
  fill: currentColor;
}
.icon-before {
  margin-right: .375em;
}
.icon-after {
  margin-left: .375em;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.icon-countdown {
  stroke-width: 2;
  transform: rotate(-90deg);
  animation: var(--countdown-duration, 7.5s) countdown linear;
}

@keyframes countdown {
  0% {
    stroke-dasharray: 0 1000;
  }
  100% {
    stroke-dasharray: 64 1000;
  }
}
.button,
.input,
.option,
.control,
.label,
.tab,
.badge,
.option {
  display: inline-block;
  padding: calc((var(--control) - 1lh)/2) 0;
  min-height: var(--control);
  min-width: var(--control);
  transition: var(--element-transition);
  display: flex;
  align-items: center;
}
.button, .button *,
.input,
.input *,
.option,
.option *,
.control,
.control *,
.label,
.label *,
.tab,
.tab *,
.badge,
.badge *,
.option,
.option * {
  line-height: var(--lineheight);
}
@media (min-width: 960px) {
  .button-lg,
  .input-lg,
  .option-lg,
  .control-lg,
  .label-lg,
  .tab-lg,
  .badge-lg,
  .option-lg {
    --control: var(--control-lg);
    --control-pad: var(--control-lg-pad);
    font-size: var(--md);
  }
}
.button-md,
.input-md,
.option-md,
.control-md,
.label-md,
.tab-md,
.badge-md,
.option-md {
  --control: 36px;
  --control-pad: 12px;
}
.button-sm,
.input-sm,
.option-sm,
.control-sm,
.label-sm,
.tab-sm,
.badge-sm,
.option-sm {
  --control: 28px;
  --control-pad: 8px;
}
.button-xs,
.input-xs,
.option-xs,
.control-xs,
.label-xs,
.tab-xs,
.badge-xs,
.option-xs {
  --control: 22px;
  --control-pad: 7px;
  top: -1px;
}
.button-pad, .button-pad-right,
.input-pad,
.input-pad-right,
.option-pad,
.option-pad-right,
.control-pad,
.control-pad-right,
.label-pad,
.label-pad-right,
.tab-pad,
.tab-pad-right,
.badge-pad,
.badge-pad-right,
.option-pad,
.option-pad-right {
  padding-right: var(--control-pad);
}
.button-pad, .button-pad-left,
.input-pad,
.input-pad-left,
.option-pad,
.option-pad-left,
.control-pad,
.control-pad-left,
.label-pad,
.label-pad-left,
.tab-pad,
.tab-pad-left,
.badge-pad,
.badge-pad-left,
.option-pad,
.option-pad-left {
  padding-left: var(--control-pad);
}
.button-block,
.input-block,
.option-block,
.control-block,
.label-block,
.tab-block,
.badge-block,
.option-block {
  display: block;
  width: 100%;
}
.button-grow,
.input-grow,
.option-grow,
.control-grow,
.label-grow,
.tab-grow,
.badge-grow,
.option-grow {
  flex-grow: 1;
}
.button .icon,
.input .icon,
.option .icon,
.control .icon,
.label .icon,
.tab .icon,
.badge .icon,
.option .icon {
  left: -6px;
}
.button .icon-right,
.input .icon-right,
.option .icon-right,
.control .icon-right,
.label .icon-right,
.tab .icon-right,
.badge .icon-right,
.option .icon-right {
  left: 6px;
}
.button-icon,
.input-icon,
.option-icon,
.control-icon,
.label-icon,
.tab-icon,
.badge-icon,
.option-icon {
  padding: 0 !important;
  width: var(--control);
  height: var(--control);
  line-height: var(--control);
  text-align: center;
  font-weight: bold;
}
.button-icon .icon, .button-icon [class*="material-symbols"],
.input-icon .icon,
.input-icon [class*="material-symbols"],
.option-icon .icon,
.option-icon [class*="material-symbols"],
.control-icon .icon,
.control-icon [class*="material-symbols"],
.label-icon .icon,
.label-icon [class*="material-symbols"],
.tab-icon .icon,
.tab-icon [class*="material-symbols"],
.badge-icon .icon,
.badge-icon [class*="material-symbols"],
.option-icon .icon,
.option-icon [class*="material-symbols"] {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.button-icon-left,
.input-icon-left,
.option-icon-left,
.control-icon-left,
.label-icon-left,
.tab-icon-left,
.badge-icon-left,
.option-icon-left {
  position: absolute;
  top: 0;
  left: 0;
}
.button-icon-right,
.input-icon-right,
.option-icon-right,
.control-icon-right,
.label-icon-right,
.tab-icon-right,
.badge-icon-right,
.option-icon-right {
  position: absolute;
  top: 0;
  right: 0;
}
.button-notify,
.input-notify,
.option-notify,
.control-notify,
.label-notify,
.tab-notify,
.badge-notify,
.option-notify {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(calc(var(--control)/5), calc(var(--control)/-5));
  box-shadow: 0 0 0 2px var(--bg);
}
.button-notify-left,
.input-notify-left,
.option-notify-left,
.control-notify-left,
.label-notify-left,
.tab-notify-left,
.badge-notify-left,
.option-notify-left {
  right: auto;
  left: 0;
  transform: translate(calc(var(--control)/-5), calc(var(--control)/-5));
}

.buttons {
  margin: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  align-items: center;
}
.buttons-center {
  justify-content: center;
}

.control {
  vertical-align: middle;
}
.control-group {
  display: flex;
}
.control-group-gap {
  gap: var(--pad);
}

.form-row, .form-col {
  display: flex;
  gap: var(--pad);
}
.form-col {
  flex-direction: column;
  gap: 8px;
}
.form-row {
  flex-wrap: wrap;
}
.form-row-center {
  justify-content: center;
}
.form-row-split {
  justify-content: space-between;
}
.form-row-stretch > * {
  flex: 1;
}
.form-row-nowrap {
  flex-wrap: nowrap;
}
.form-gap {
  flex: 1;
}

.button,
.option {
  --btn-color: var(--color);
  --btn-bg: var(--shade);
  --btn-hover: var(--shade2);
  --btn-active: var(--shade-active);
  color: inherit;
  background: var(--shade);
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  font-weight: 700;
  text-align: center;
  border-radius: 100px;
  text-decoration: none !important;
  white-space: nowrap;
  min-width: var(--control);
  padding-left: var(--control-pad);
  padding-right: var(--control-pad);
  font-size: var(--base);
}
.button:hover, .button:focus, .button:has(a:hover), .button:has(a:focus),
.option:hover,
.option:focus,
.option:has(a:hover),
.option:has(a:focus) {
  background-color: var(--shade2);
}
.button-lg,
.option-lg {
  font-size: var(--md);
}
.button-sm,
.option-sm {
  font-size: var(--sm);
}
.button-xs,
.option-xs {
  font-size: var(--sm);
}
.button-clear,
.option-clear {
  background: transparent;
}
.button-bg,
.option-bg {
  background: var(--bg);
}
.button-yellow,
.option-yellow {
  background: var(--yellow);
  color: black;
}
.button-yellow:hover, .button-yellow:focus, .button-yellow:has(a:hover), .button-yellow:has(a:focus),
.option-yellow:hover,
.option-yellow:focus,
.option-yellow:has(a:hover),
.option-yellow:has(a:focus) {
  background-color: color-mix(in srgb, var(--yellow), white 25%);
}
.button-overlay,
.option-overlay {
  background: rgba(0, 0, 0, 0.333);
  color: white;
  backdrop-filter: blur(10px) saturate(150%);
}
.button-primary,
.option-primary {
  color: var(--bg);
  background: var(--heading) !important;
}
.button-primary:hover, .button-primary:focus, .button-primary:has(a:hover), .button-primary:has(a:focus),
.option-primary:hover,
.option-primary:focus,
.option-primary:has(a:hover),
.option-primary:has(a:focus) {
  opacity: .75;
}
.button-wrap,
.option-wrap {
  white-space: wrap;
  text-align: left;
}
.button-icon-left,
.option-icon-left {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 10px;
}
.button-user,
.option-user {
  padding-left: calc(var(--control) + 16px);
}
.button-user-avatar,
.option-user-avatar {
  position: absolute;
  top: 0;
  left: 0;
  background: black;
}
.button-badge,
.option-badge {
  line-height: 24px;
  min-width: 24px;
  display: block;
  background: blue;
  color: white;
  border-radius: 100px;
  position: absolute;
  top: 0;
  right: 0;
  transition: all .5s;
  transform: translate(50%, -50%);
  transform: translate(50%, -50%) scale(2);
}

.tab {
  padding-right: 1.5em;
  padding-bottom: 1em;
  white-space: nowrap;
}

.tabs {
  overflow: hidden;
  overflow-x: scroll;
  margin-inline: calc(var(--gutter-x) * -1);
  padding-inline: var(--gutter-x);
  white-space: nowrap;
}
.tabs .tab {
  display: inline-block;
}

.input {
  display: block;
  width: 100%;
  color: var(--color);
  border-radius: var(--radius);
  padding-left: var(--control-pad);
  padding-right: var(--control-pad);
  box-shadow: inset 0 0 0 1px var(--border);
  background: var(--shade);
}
.input:hover, .input:focus, .input:has(a:hover), .input:has(a:focus) {
  background: var(--shade2);
}
.input-inline {
  width: auto;
  display: inline-block;
}
.input-quantity {
  display: inline-block;
  width: calc(var(--control) * 1.25);
  min-width: 0;
  text-align: center;
}
.input-pad {
  padding-inline: var(--control);
}
.input-pad-left {
  padding-left: var(--control);
}
.input-pad-right {
  padding-right: var(--control);
}
.input::placeholder {
  color: var(--subtle);
}
.input:-ms-input-placeholder {
  color: var(--subtle);
}

.textarea {
  --textarea: 5;
  resize: vertical;
  height: calc(var(--control) + var(--lineheight) * (var(--textarea) - 1));
}

.select, .input:is(select) {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23888888' stroke='%23888888' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M4 6.5l4 4 4-4 -8 0'/%3e%3c/svg%3e");
  background-position: right calc((var(--control) - 16px)/2) bottom calc((var(--control) - 16px)/2);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  padding-right: calc(var(--control) - 4px);
}

.label {
  font-size: var(--sm);
  font-weight: bold;
}

.field {
  margin: var(--pad) 0;
}

/*********** Baseline, reset styles ***********/
.range {
  -webkit-appearance: none;
  /* Override default CSS styles */
  appearance: none;
  width: 100%;
  height: 8px;
  background: var(--shade2);
  outline: none;
  transition: opacity .2s;
  border-radius: 100px;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--orange);
  cursor: pointer;
  border-radius: 100px;
  box-shadow: 0 0 0 3px white;
}
.range::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--orange);
  cursor: pointer;
  border-radius: 100px;
  box-shadow: 0 0 0 3px white;
}

.m {
  margin: var(--space) !important;
}
.mt, .my {
  margin-top: var(--space) !important;
}
.ml, .mx {
  margin-left: var(--space) !important;
}
.mr, .mx {
  margin-right: var(--space) !important;
}
.mb, .my {
  margin-bottom: var(--space) !important;
}
.m-- {
  margin: calc(var(--space) * -1) !important;
}
.mt--, .my-- {
  margin-top: calc(var(--space) * -1) !important;
}
.ml--, .mx-- {
  margin-left: calc(var(--space) * -1) !important;
}
.mr--, .mx-- {
  margin-right: calc(var(--space) * -1) !important;
}
.mb--, .my-- {
  margin-bottom: calc(var(--space) * -1) !important;
}
.m--4 {
  margin: calc(var(--space) * -4) !important;
}
.mt--4, .my--4 {
  margin-top: calc(var(--space) * -4) !important;
}
.ml--4, .mx--4 {
  margin-left: calc(var(--space) * -4) !important;
}
.mr--4, .mx--4 {
  margin-right: calc(var(--space) * -4) !important;
}
.mb--4, .my--4 {
  margin-bottom: calc(var(--space) * -4) !important;
}
.m--3 {
  margin: calc(var(--space) * -3) !important;
}
.mt--3, .my--3 {
  margin-top: calc(var(--space) * -3) !important;
}
.ml--3, .mx--3 {
  margin-left: calc(var(--space) * -3) !important;
}
.mr--3, .mx--3 {
  margin-right: calc(var(--space) * -3) !important;
}
.mb--3, .my--3 {
  margin-bottom: calc(var(--space) * -3) !important;
}
.m--2 {
  margin: calc(var(--space) * -2) !important;
}
.mt--2, .my--2 {
  margin-top: calc(var(--space) * -2) !important;
}
.ml--2, .mx--2 {
  margin-left: calc(var(--space) * -2) !important;
}
.mr--2, .mx--2 {
  margin-right: calc(var(--space) * -2) !important;
}
.mb--2, .my--2 {
  margin-bottom: calc(var(--space) * -2) !important;
}
.m--1 {
  margin: calc(var(--space) * -1) !important;
}
.mt--1, .my--1 {
  margin-top: calc(var(--space) * -1) !important;
}
.ml--1, .mx--1 {
  margin-left: calc(var(--space) * -1) !important;
}
.mr--1, .mx--1 {
  margin-right: calc(var(--space) * -1) !important;
}
.mb--1, .my--1 {
  margin-bottom: calc(var(--space) * -1) !important;
}
.m-0 {
  margin: calc(var(--space) * 0) !important;
}
.mt-0, .my-0 {
  margin-top: calc(var(--space) * 0) !important;
}
.ml-0, .mx-0 {
  margin-left: calc(var(--space) * 0) !important;
}
.mr-0, .mx-0 {
  margin-right: calc(var(--space) * 0) !important;
}
.mb-0, .my-0 {
  margin-bottom: calc(var(--space) * 0) !important;
}
.m-1 {
  margin: calc(var(--space) * 1) !important;
}
.mt-1, .my-1 {
  margin-top: calc(var(--space) * 1) !important;
}
.ml-1, .mx-1 {
  margin-left: calc(var(--space) * 1) !important;
}
.mr-1, .mx-1 {
  margin-right: calc(var(--space) * 1) !important;
}
.mb-1, .my-1 {
  margin-bottom: calc(var(--space) * 1) !important;
}
.m-2 {
  margin: calc(var(--space) * 2) !important;
}
.mt-2, .my-2 {
  margin-top: calc(var(--space) * 2) !important;
}
.ml-2, .mx-2 {
  margin-left: calc(var(--space) * 2) !important;
}
.mr-2, .mx-2 {
  margin-right: calc(var(--space) * 2) !important;
}
.mb-2, .my-2 {
  margin-bottom: calc(var(--space) * 2) !important;
}
.m-3 {
  margin: calc(var(--space) * 3) !important;
}
.mt-3, .my-3 {
  margin-top: calc(var(--space) * 3) !important;
}
.ml-3, .mx-3 {
  margin-left: calc(var(--space) * 3) !important;
}
.mr-3, .mx-3 {
  margin-right: calc(var(--space) * 3) !important;
}
.mb-3, .my-3 {
  margin-bottom: calc(var(--space) * 3) !important;
}
.m-4 {
  margin: calc(var(--space) * 4) !important;
}
.mt-4, .my-4 {
  margin-top: calc(var(--space) * 4) !important;
}
.ml-4, .mx-4 {
  margin-left: calc(var(--space) * 4) !important;
}
.mr-4, .mx-4 {
  margin-right: calc(var(--space) * 4) !important;
}
.mb-4, .my-4 {
  margin-bottom: calc(var(--space) * 4) !important;
}

.p {
  padding: var(--space) !important;
}
.pt, .py {
  padding-top: var(--space) !important;
}
.pl, .px {
  padding-left: var(--space) !important;
}
.pr, .px {
  padding-right: var(--space) !important;
}
.pb, .py {
  padding-bottom: var(--space) !important;
}
.p-0 {
  padding: calc(var(--space) * 0) !important;
}
.pt-0, .py-0 {
  padding-top: calc(var(--space) * 0) !important;
}
.pl-0, .px-0 {
  padding-left: calc(var(--space) * 0) !important;
}
.pr-0, .px-0 {
  padding-right: calc(var(--space) * 0) !important;
}
.pb-0, .py-0 {
  padding-bottom: calc(var(--space) * 0) !important;
}
.p-1 {
  padding: calc(var(--space) * 1) !important;
}
.pt-1, .py-1 {
  padding-top: calc(var(--space) * 1) !important;
}
.pl-1, .px-1 {
  padding-left: calc(var(--space) * 1) !important;
}
.pr-1, .px-1 {
  padding-right: calc(var(--space) * 1) !important;
}
.pb-1, .py-1 {
  padding-bottom: calc(var(--space) * 1) !important;
}
.p-2 {
  padding: calc(var(--space) * 2) !important;
}
.pt-2, .py-2 {
  padding-top: calc(var(--space) * 2) !important;
}
.pl-2, .px-2 {
  padding-left: calc(var(--space) * 2) !important;
}
.pr-2, .px-2 {
  padding-right: calc(var(--space) * 2) !important;
}
.pb-2, .py-2 {
  padding-bottom: calc(var(--space) * 2) !important;
}
.p-3 {
  padding: calc(var(--space) * 3) !important;
}
.pt-3, .py-3 {
  padding-top: calc(var(--space) * 3) !important;
}
.pl-3, .px-3 {
  padding-left: calc(var(--space) * 3) !important;
}
.pr-3, .px-3 {
  padding-right: calc(var(--space) * 3) !important;
}
.pb-3, .py-3 {
  padding-bottom: calc(var(--space) * 3) !important;
}
.p-4 {
  padding: calc(var(--space) * 4) !important;
}
.pt-4, .py-4 {
  padding-top: calc(var(--space) * 4) !important;
}
.pl-4, .px-4 {
  padding-left: calc(var(--space) * 4) !important;
}
.pr-4, .px-4 {
  padding-right: calc(var(--space) * 4) !important;
}
.pb-4, .py-4 {
  padding-bottom: calc(var(--space) * 4) !important;
}

.s-0 > * {
  margin-bottom: 0 !important;
}

.s-1 > * {
  margin-bottom: var(--space) !important;
}

.s-2 > * {
  margin-bottom: calc(var(--space) * 2) !important;
}

.s-3 > * {
  margin-bottom: calc(var(--space) * 3) !important;
}

.s-4 > * {
  margin-bottom: calc(var(--space) * 4) !important;
}

.circle {
  border-radius: 50% !important;
}

.pill {
  border-radius: 100vw !important;
}

.round {
  border-radius: var(--radius);
}

.round-lg {
  border-radius: var(--radius-lg);
}

.flex {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.blend-softlight {
  mix-blend-mode: soft-light;
}
.blend-overlay {
  mix-blend-mode: overlay;
}

.zoom {
  transform: scale(1.25);
}

.over {
  z-index: 2;
}

.nowrap {
  white-space: nowrap;
}

.space-after {
  padding-right: 10px;
}

@media (min-width: 960px) {
  .desktop-first {
    order: -1000;
  }
  .desktop-last {
    order: 1000;
  }
}
@media (max-width: 959px) {
  .desktop {
    display: none !important;
  }
}

@media (max-width: 959px) {
  .mobile-first {
    order: -1000;
  }
  .mobile-last {
    order: 1000;
  }
}
@media (min-width: 960px) {
  .mobile {
    display: none !important;
  }
}

.disabled, [disabled] {
  opacity: .375;
  pointer-events: none;
  cursor: not-allowed;
}

.display-block {
  display: block;
}
@media (max-width: 959px) {
  .display-block-sm {
    display: block;
  }
}
@media (min-width: 960px) {
  .display-block-lg {
    display: block;
  }
}
.display-inline-block {
  display: inline-block;
}
@media (max-width: 959px) {
  .display-inline-block-sm {
    display: inline-block;
  }
}
@media (min-width: 960px) {
  .display-inline-block-lg {
    display: inline-block;
  }
}
.display-inline {
  display: inline;
}
@media (max-width: 959px) {
  .display-inline-sm {
    display: inline;
  }
}
@media (min-width: 960px) {
  .display-inline-lg {
    display: inline;
  }
}

.compact > * {
  margin-top: 0;
  margin-bottom: 0;
}

.grow {
  flex-grow: 1;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.strike {
  text-decoration: line-through;
}

.snug > *, .box > *, .note > * {
  margin-block: var(--space);
}

.spaced > * {
  margin-block: var(--grid-gap);
}

.capitalize {
  text-transform: capitalize;
}

.hidden {
  display: none;
}

.buffer {
  margin-bottom: 6px;
}

.shadowless {
  box-shadow: none;
}

.scene-group {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  padding: 20px 0 80px;
  text-align: center;
}
@media (max-width: 959px) {
  .scene-group {
    grid-template-columns: 1fr;
  }
}

.scene {
  text-align: right;
  aspect-ratio: 1;
  container-type: inline-size;
  border-radius: var(--radius);
}
.scene:hover {
  z-index: 2;
}
.scene-package {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  perspective: 200cqw;
}
.scene-label {
  font-size: var(--xs);
  display: inline-block;
  font-weight: bold;
  padding: 20px 10px;
}

.package {
  --scale: 4cqw;
  --avg: calc((var(--width) + var(--height) + var(--depth))/3);
  --scale: calc(20cqw / var(--avg) + 2cqw);
  --corner: calc(var(--scale) / 2);
  --w: calc(var(--width) * var(--scale));
  --h: calc(var(--height) * var(--scale));
  --d: calc(var(--depth) * var(--scale));
  --flap: calc(var(--h) - var(--scale) * .5);
  --lift: calc(var(--h) /-1.75);
  --material: url(/assets/img/cardboard.jpg);
  --flip: 0deg;
  --open: 0deg;
  --insides: 0;
  position: absolute;
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform 0.5s ease-in-out;
  transform: rotateX(-45deg) rotateY(-60deg);
  pointer-events: none;
}
.package > *[class*="inner"] {
  --flip: 180deg;
}
.scene-package:hover .package {
  transform: rotateX(calc(var(--y) * -90deg)) rotateY(calc(var(--x) * 160deg));
}
@media (hover: hover) {
  .scene-package:hover .package {
    transition: none;
    animation: swivel 0.5s ease-in-out;
  }
}
.package-open {
  --insides: 1;
  transform: translateY(calc((var(--h) + var(--d))/3)) rotateX(-45deg) rotateY(0deg);
}
.scene-package:hover .package-open {
  animation: swivelopen 0.5s ease-in-out;
  transform: translateY(calc((var(--h) + var(--d))/3)) rotateX(calc(var(--y) * -90deg)) rotateY(calc(var(--x) * 160deg));
}
.package:not(.package-open) .package-flapfront,
.package:not(.package-open) .package-flapfrontright,
.package:not(.package-open) .package-flapfrontleft,
.package:not(.package-open) .package-flapright,
.package:not(.package-open) .package-flapleft {
  display: none;
}
.package-white {
  --material: white;
}
.package > * {
  --img: transparent;
  position: absolute;
  transform-origin: 50% 50%;
  background: var(--material) 50% 50%/cover;
  backface-visibility: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto !important;
}
.package > *:before {
  content: '';
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  background: var(--img) 50% 50%/cover;
}
.package > *:after {
  content: '';
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom right, #fff, #000);
  mix-blend-mode: overlay;
  opacity: .25;
}
.package-front {
  --img: var(--front);
}
.package-front-inner {
  --img: var(--front-inner);
}
.package-top {
  --img: var(--top);
}
.package-top-inner {
  --img: var(--top-inner);
}
.package-back {
  --img: var(--back);
}
.package-back-inner {
  --img: var(--back-inner);
}
.package-left {
  --img: var(--left);
}
.package-left-inner {
  --img: var(--left-inner);
}
.package-right {
  --img: var(--right);
}
.package-right-inner {
  --img: var(--right-inner);
}
.package-bottom {
  --img: var(--bottom);
}
.package-bottom-inner {
  --img: var(--bottom-inner);
}
.package-flapfront {
  --img: var(--flapfront);
}
.package-flapfront-inner {
  --img: var(--flapfront-inner);
}
.package-flapfrontright {
  --img: var(--flapfrontright);
}
.package-flapfrontright-inner {
  --img: var(--flapfrontright-inner);
}
.package-flapfrontleft {
  --img: var(--flapfrontleft);
}
.package-flapfrontleft-inner {
  --img: var(--flapfrontleft-inner);
}
.package-flapright {
  --img: var(--flapright);
}
.package-flapright-inner {
  --img: var(--flapright-inner);
}
.package-flapleft {
  --img: var(--flapleft);
}
.package-flapleft-inner {
  --img: var(--flapleft-inner);
}
.package-cover {
  --img: var(--cover);
}
.package-cover-inner {
  --img: var(--cover-inner);
}
.package-bookfront {
  --img: var(--bookfront);
}
.package-bookfront-inner {
  --img: var(--bookfront-inner);
}
.package-bookback {
  --img: var(--bookback);
}
.package-bookback-inner {
  --img: var(--bookback-inner);
}
.package-postcard {
  --img: var(--postcard);
}
.package-postcard-inner {
  --img: var(--postcard-inner);
}
.package-inset {
  --img: var(--inset);
}
.package-inset-inner {
  --img: var(--inset-inner);
}
.package-bottom {
  width: var(--w);
  height: var(--d);
  transform: translate3d(0, calc(var(--h)/2), 0) rotateX(calc(-90deg - var(--flip))) rotateZ(calc(180deg - var(--flip)));
}
.package-shadow {
  --flip: 180deg;
  width: var(--w);
  height: var(--d);
  transform: translate3d(0, calc(var(--h)/2), 0) rotateX(calc(-90deg - var(--flip)));
  background: black;
  opacity: .5;
  filter: blur(calc(var(--scale) * 2));
}
.package-right {
  width: var(--d);
  height: var(--h);
  transform: translate3d(calc(var(--w)/2), 0, 0) rotateY(calc(90deg - var(--flip)));
}
.package-right-flap {
  width: var(--flap);
  height: calc(var(--d) - var(--scale) * .125);
  transform-origin: 0 100%;
  transform: translateX(var(--w)) translateY(-100%) rotateX(45deg);
  border-radius: 0 calc(var(--h)/2) var(--corner) 0;
}
.package-left {
  width: var(--d);
  height: var(--h);
  transform: translate3d(calc(var(--w)/-2), 0, 0) rotateY(calc(-90deg + var(--flip)));
}
.package-left-flap {
  width: var(--flap);
  height: calc(var(--d) - var(--scale) * .125);
  transform-origin: 0 100%;
  transform: translateX(-100%) translateY(-100%) rotateX(45deg);
  border-radius: calc(var(--h)/2) 0 0 var(--corner);
}
.package-back {
  width: var(--w);
  height: var(--h);
  transform: translate3d(0, 0, calc(var(--d)/-2)) rotateY(calc(180deg - var(--flip)));
}
.package-front {
  width: var(--w);
  height: var(--h);
  transform: translate3d(0, 0, calc(var(--d)/2)) rotateY(calc(0deg - var(--flip)));
}
.package:not(.package-open) .package-front {
  --img: var(--flapfront,var(--front));
}
.package-top {
  width: var(--w);
  height: var(--d);
  transform: translate3d(0, calc(var(--h)/-2), 0) rotateX(calc(90deg - var(--flip)));
}
.package-open .package-top {
  transform: translate3d(0, calc(var(--h)/-2 - var(--d)*0.3535533906), calc(var(--d)/-2 - var(--d)*0.3535533906)) rotateX(calc(-135deg - var(--flip)));
}
.package-flapfront {
  width: var(--w);
  height: var(--h);
  transform: translate3d(0, calc(var(--h)/-1 - var(--d)*0.7071067812 ), calc(var(--d)*-1.2071067812)) rotateY(calc(180deg - var(--flip))) rotateZ(calc(180deg - var(--flip)));
}
.package-flapfront-short {
  height: var(--scale);
  transform: translate3d(0, calc(var(--h)*-.5 - var(--scale)*.5 - var(--d)*0.7071067812), calc(var(--d)*-1.2071067812)) rotateY(calc(180deg - var(--flip)));
  border-radius: var(--corner) var(--corner) 0 0;
}
.package-flapfrontright {
  width: var(--flap);
  height: var(--h);
  transform: translate3d(calc(var(--w)/2 + calc(var(--h)/2  - var(--scale) * .25)), calc(var(--h)/-1 - var(--d)*0.7071067812 ), calc(var(--d)*-1.2071067812)) rotateY(calc(180deg - var(--flip)));
  border-radius: 95% 0 0 var(--corner);
}
.package-flapfrontright[class*="inner"] {
  border-radius: 0 95% var(--corner) 0;
}
.package-flapfrontleft {
  width: var(--flap);
  height: var(--h);
  transform: translate3d(calc(var(--w)/-2 - calc(var(--h)/2  - var(--scale) * .25)), calc(var(--h)/-1 - var(--d)*0.7071067812 ), calc(var(--d)*-1.2071067812)) rotateY(calc(180deg - var(--flip)));
  border-radius: 0 95% var(--corner) 0;
}
.package-flapfrontleft[class*="inner"] {
  border-radius: 95% 0 0 var(--corner);
}
.package-flapright {
  width: var(--flap);
  height: var(--d);
  transform: translate3d(calc(var(--w)/2 + calc(var(--h)/2  - var(--scale) * .25)), calc(var(--h)/-2 - var(--d)*0.3535533906), calc(var(--d)/-2 - var(--d)*0.3535533906)) rotateX(calc(-135deg - var(--flip))) rotateZ(calc(180deg - var(--flip)));
  border-radius: calc(var(--h)/2) 0 0 var(--corner);
}
.package-flapright[class*="inner"] {
  border-radius: 0 calc(var(--h)/2) var(--corner) 0;
}
.package-flapleft {
  width: var(--flap);
  height: var(--d);
  transform: translate3d(calc(var(--w)/-2 - calc(var(--h)/2  - var(--scale) * .25)), calc(var(--h)/-2 - var(--d)*0.3535533906), calc(var(--d)/-2 - var(--d)*0.3535533906)) rotateX(calc(-135deg - var(--flip))) rotateZ(calc(180deg - var(--flip)));
  border-radius: 0 calc(var(--h)/2) var(--corner) 0;
}
.package-flapleft[class*="inner"] {
  border-radius: calc(var(--h)/2) 0 0 var(--corner);
}
.package-cover {
  width: calc(var(--w) - var(--scale)/2);
  height: calc(var(--d) - var(--scale)/2);
  transform: translate3d(0, calc(var(--h)/-2), 0) rotateX(90deg) rotateY(var(--flip));
  opacity: var(--insides);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.075);
  will-change: transform;
}
.package-open .package-cover {
  animation: cover 4s 2s ease forwards;
}
.package-bookfront {
  width: calc(var(--w) - var(--scale)/2);
  height: calc(var(--d) - var(--scale)/2);
  transform: translate3d(0, calc(var(--h)/-2), 0) rotateX(90deg) rotateY(var(--flip));
  opacity: var(--insides);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.075);
  will-change: transform;
}
.package-open .package-bookfront {
  animation: bookfront 4s 2s ease forwards;
}
.package-bookback {
  width: calc(var(--w) - var(--scale)/2);
  height: calc(var(--d) - var(--scale)/2);
  transform: translate3d(0, calc(var(--h) / -2), 0) rotateX(90deg) rotateY(calc(180deg - var(--flip)));
  opacity: var(--insides);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.075);
  will-change: transform;
}
.package-open .package-bookback {
  animation: bookback 4s 2s ease forwards;
}
.package-postcard {
  width: calc(7 * var(--scale));
  height: calc(5 * var(--scale));
  transform: translate3d(0, calc(var(--h)/-2), 0) rotateX(90deg) rotateY(var(--flip));
  opacity: var(--insides);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.075);
  will-change: transform;
}
.package-open .package-postcard {
  animation: postcard 4s 2s ease forwards;
}
.package-inset {
  width: calc(var(--w) - calc(var(--scale)/2));
  height: calc(var(--d) - calc(var(--scale)/2));
  transform: translate3d(0, calc(var(--h)/-6), 0) rotateX(90deg);
  opacity: var(--insides);
}

@keyframes swivel {
  0% {
    transform: rotateX(-45deg) rotateY(-60deg);
  }
  100% {
    transform: rotateX(calc(var(--y) * -90deg)) rotateY(calc(var(--x) * 160deg));
  }
}
@keyframes swivelopen {
  0% {
    transform: translateY(calc((var(--h) + var(--d))/3)) rotateX(-45deg) rotateY(0deg);
  }
  100% {
    transform: translateY(calc((var(--h) + var(--d))/3)) rotateX(calc(var(--y) * -90deg)) rotateY(calc(var(--x) * 160deg));
  }
}
@keyframes cover {
  0% {
    transform: translate3d(0, calc(var(--h)/-2), 0) rotateX(90deg) rotateY(var(--flip));
  }
  50% {
    transform: translate3d(0, calc(var(--h) * -2), 0) rotateX(45deg) rotateY(var(--flip));
  }
  100% {
    transform: translate3d(calc(var(--w) * -1), calc(var(--h) * -2), calc(var(--d)/-2)) rotateX(45deg) rotateY(calc(var(--flip) - 180deg));
  }
}
@keyframes postcard {
  0%, 50% {
    transform: translate3d(0, calc(var(--h)/-2.1), 0) rotateX(90deg) rotateY(var(--flip));
  }
  100% {
    transform: translate3d(calc(var(--w) * 1), calc(var(--h) * -2), calc(var(--d)/-2)) rotateX(45deg) rotateY(calc(var(--flip) - 180deg));
  }
}
@keyframes bookfront {
  0% {
    transform: translate3d(0, calc(var(--h)/-2), 0) rotateX(90deg) rotateY(var(--flip));
  }
  50% {
    transform: translate3d(0, calc(var(--h) * -2), 0) rotateX(45deg) rotateY(var(--flip));
  }
  100% {
    transform: translate3d(calc(var(--w) * -1.5), calc(var(--h) * -2), calc(var(--d)/-2)) rotateX(45deg) rotateY(calc(var(--flip) - 180deg));
  }
}
@keyframes bookback {
  0% {
    transform: translate3d(0, calc(var(--h)/-2), 0) rotateX(90deg) rotateY(calc(180deg - var(--flip)));
    opacity: 0;
  }
  50% {
    transform: translate3d(0, calc(var(--h) * -2), 0) rotateX(45deg) rotateY(calc(180deg - var(--flip)));
    opacity: 0;
  }
  100% {
    transform: translate3d(calc(var(--w) * -.5 - var(--scale) / 2), calc(var(--h) * -2), calc(var(--d)/-2)) rotateX(45deg) rotateY(calc(180deg - var(--flip)));
    opacity: 1;
  }
}
.frame {
  width: 100%;
  aspect-ratio: 1;
}

body {
  min-height: 100vh;
}

.page {
  contain: paint;
}

.section {
  padding: var(--gutter-y) var(--gutter-x);
}
.section-tall, .section-full {
  padding-block: calc(var(--gutter-y) + min(50px,5vw));
}
.section-full {
  min-height: 100vh;
}

.cols {
  display: grid;
  margin: var(--gap) 0;
}
.cols-center {
  align-items: center;
}
.cols-reverse {
  direction: rtl;
}
.cols > .col {
  direction: ltr;
}
@media (min-width: 960px) {
  .cols {
    grid-template-columns: repeat(12, 1fr);
  }
  .cols > .col-1 {
    grid-column: span 1;
  }
  .cols > .col-2 {
    grid-column: span 2;
  }
  .cols > .col-3 {
    grid-column: span 3;
  }
  .cols > .col-4 {
    grid-column: span 4;
  }
  .cols > .col-5 {
    grid-column: span 5;
  }
  .cols > .col-6 {
    grid-column: span 6;
  }
  .cols > .col-7 {
    grid-column: span 7;
  }
  .cols > .col-8 {
    grid-column: span 8;
  }
  .cols > .col-9 {
    grid-column: span 9;
  }
  .cols > .col-10 {
    grid-column: span 10;
  }
  .cols > .col-11 {
    grid-column: span 11;
  }
  .cols > .col-12 {
    grid-column: span 12;
  }
}

.row {
  --row-gap: var(--gap);
  padding: var(--gap) var(--gutter-x);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--row-gap);
}
@media (max-width: 959px) {
  .row {
    --row-gap: 32px;
    padding-block: var(--row-gap);
  }
}
.row-short {
  padding-block: var(--gap-sm);
}
.row-tall {
  padding-block: calc(var(--gap) + min(50px,5vw));
}
.row-tight {
  --row-gap: var(--grid-gap) ;
}
.row-middle {
  align-items: center;
}
.row-reverse {
  flex-direction: row-reverse;
}
.row > .col {
  --col-width: 1;
  width: 100%;
  width: calc((100% + var(--row-gap))*var(--col-width) - var(--row-gap));
  border-radius: var(--radius-lg);
  margin: 0 !important;
}
@media (min-width: 960px) {
  .row > .col {
    border-radius: var(--radius-lg);
  }
  .row > .col-xs {
    --col-width: .3;
  }
  .row > .col-sm {
    --col-width: .375;
  }
  .row > .col-lg {
    --col-width: .625;
  }
  .row > .col-xl {
    --col-width: .7;
  }
  .row > .col-1 {
    --col-width: 0.0833333333;
  }
  .row > .col-2 {
    --col-width: 0.1666666667;
  }
  .row > .col-3 {
    --col-width: 0.25;
  }
  .row > .col-4 {
    --col-width: 0.3333333333;
  }
  .row > .col-5 {
    --col-width: 0.4166666667;
  }
  .row > .col-6 {
    --col-width: 0.5;
  }
  .row > .col-7 {
    --col-width: 0.5833333333;
  }
  .row > .col-8 {
    --col-width: 0.6666666667;
  }
  .row > .col-9 {
    --col-width: 0.75;
  }
  .row > .col-10 {
    --col-width: 0.8333333333;
  }
  .row > .col-11 {
    --col-width: 0.9166666667;
  }
  .row > .col-12 {
    --col-width: 1;
  }
}

.pad, .pad-top {
  padding-top: var(--pad);
}
.pad, .pad-left {
  padding-left: var(--pad);
}
.pad, .pad-right {
  padding-right: var(--pad);
}
.pad, .pad-bottom {
  padding-bottom: var(--pad);
}

.card {
  padding: var(--gap);
  background: #f5f5f5;
  border-radius: var(--radius-lg);
  --shade: var(--bg);
}

.slides {
  background: white;
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  contain: paint;
  font-size: var(--xl);
  width: 95vw;
  height: 59.375vw;
  --xs: 0.7vw;
  --sm: 0.8vw;
  --base: 1vw;
  --md: 1.2vw;
  --lg: 1.8vw;
  --xl: 3.6vw;
  --xxl: 4.8vw;
  --margin: 1;
  --gutter-x: 4vw;
  --gutter-y: 4vw;
  --page: 100vw;
  --control: 44px;
  --icon: 24px;
}

.slide {
  transition: opacity .5s;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--gutter-y) + 5vw) calc(var(--gutter-x) + 5vw);
}
.slide > * {
  max-width: var(--page);
}
.slide li {
  margin-bottom: .5em;
}
.slide ul {
  font-size: var(--lg);
}
.slide h1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: var(--xxl);
}
.slide-pages {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 100;
}
.slide .checklist {
  list-style-type: none;
  padding-left: 1.5em;
}
.slide .checklist li {
  margin: 0;
}
.slide .checklist strong:before {
  content: '';
  display: block;
  position: absolute;
  border: 0 solid;
  border-width: 0 0 .125em .125em;
  width: .7em;
  height: .4em;
  transform: rotate(-45deg);
  top: 20%;
  left: -1.2em;
}

.slide:has(:target),
.slides:not(:has(:target)) .slide:first-child {
  pointer-events: auto;
  opacity: 1;
}

@keyframes fadein {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.box {
  padding: var(--gap);
  margin: 4em 0;
  background: var(--shade);
  border-radius: var(--radius);
}
.box-sm {
  margin: 1em 0;
  padding: 24px;
}

.note {
  padding: var(--pad);
  margin: var(--pad) 0;
  background: var(--shade);
  border-radius: var(--radius-lg);
  font-size: var(--sm);
}

.highlight em, .highlight strong {
  color: var(--highlight);
}
.highlight em:nth-of-type(5n + 1), .highlight em:nth-of-type(5n + 1) strong, .highlight strong:nth-of-type(5n + 1), .highlight strong:nth-of-type(5n + 1) strong, .highlight li:nth-of-type(5n + 1), .highlight li:nth-of-type(5n + 1) strong {
  --highlight: var(--yellow) ;
}
.highlight em:nth-of-type(5n + 2), .highlight em:nth-of-type(5n + 2) strong, .highlight strong:nth-of-type(5n + 2), .highlight strong:nth-of-type(5n + 2) strong, .highlight li:nth-of-type(5n + 2), .highlight li:nth-of-type(5n + 2) strong {
  --highlight: var(--blue) ;
}
.highlight em:nth-of-type(5n + 3), .highlight em:nth-of-type(5n + 3) strong, .highlight strong:nth-of-type(5n + 3), .highlight strong:nth-of-type(5n + 3) strong, .highlight li:nth-of-type(5n + 3), .highlight li:nth-of-type(5n + 3) strong {
  --highlight: var(--orange) ;
}
.highlight em:nth-of-type(5n + 4), .highlight em:nth-of-type(5n + 4) strong, .highlight strong:nth-of-type(5n + 4), .highlight strong:nth-of-type(5n + 4) strong, .highlight li:nth-of-type(5n + 4), .highlight li:nth-of-type(5n + 4) strong {
  --highlight: var(--green) ;
}
.highlight em:nth-of-type(5n + 5), .highlight em:nth-of-type(5n + 5) strong, .highlight strong:nth-of-type(5n + 5), .highlight strong:nth-of-type(5n + 5) strong, .highlight li:nth-of-type(5n + 5), .highlight li:nth-of-type(5n + 5) strong {
  --highlight: var(--purple) ;
}
.highlight mark {
  --mark: color-mix(in srgb,var(--highlight),transparent 75%);
  background: var(--mark);
  box-shadow: 0 0 0 0.2em var(--mark);
  border-radius: .1em;
}

.grid-container {
  container-type: inline-size;
  margin-block: var(--gap-sm);
}

.grid {
  --grid-size: 3;
  --grid-item: calc( ( 100cqw - ( var(--grid-size) - 1 ) * var(--grid-gap) ) / var(--grid-size) );
  --grid-item-bg: radial-gradient(transparent, var(--shade));
  --lineheight: clamp(1em,calc(1.5em + 1em - 1rem),1.5em);
  --grid-radius: var(--radius);
  --grid-fontsize: var(--sm);
  font-size: var(--grid-fontsize);
  margin-inline: calc(var(--gutter-x) * -1);
}
.grid-clear {
  --grid-item-bg: transparent;
}
.grid-items {
  display: flex;
  gap: var(--grid-gap);
  padding-inline: var(--gutter-x);
  scroll-padding-inline: var(--gutter-x);
  overflow: hidden;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.grid-items::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.grid-items-wrap {
  overflow: visible;
  flex-wrap: wrap;
}
.grid-square {
  --grid-ratio: calc(1);
}
.grid-tall {
  --grid-ratio: calc(9/16);
}
.grid-tallish {
  --grid-ratio: calc(3/4);
}
.grid-wide {
  --grid-ratio: calc(16/9);
}
.grid-wideish {
  --grid-ratio: calc(4/3);
}
@media (min-width: 960px) {
  .col:is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11) .grid {
    --gutter-x: var(--grid-gap);
  }
}
@container (min-width: 510px) {
  .grid {
    --grid-size: 4;
  }
}
@container (min-width: 680px) {
  .grid {
    --grid-size: 5;
  }
}
@container (min-width: 850px) {
  .grid {
    --grid-size: 6;
  }
}
@container (min-width: 1020px) {
  .grid {
    --grid-size: 7;
  }
}
@container (min-width: 1190px) {
  .grid {
    --grid-size: 8;
  }
}
.grid-thumb {
  --radius: var(--radius-sm);
}
@container (min-width: 192px) {
  .grid-thumb {
    --grid-size: 4;
  }
}
@container (min-width: 256px) {
  .grid-thumb {
    --grid-size: 5;
  }
}
@container (min-width: 320px) {
  .grid-thumb {
    --grid-size: 6;
  }
}
@container (min-width: 384px) {
  .grid-thumb {
    --grid-size: 7;
  }
}
@container (min-width: 448px) {
  .grid-thumb {
    --grid-size: 8;
  }
}
@container (min-width: 512px) {
  .grid-thumb {
    --grid-size: 9;
  }
}
@container (min-width: 576px) {
  .grid-thumb {
    --grid-size: 10;
  }
}
@container (min-width: 405px) {
  .grid-xs {
    --grid-size: 4;
  }
}
@container (min-width: 540px) {
  .grid-xs {
    --grid-size: 5;
  }
}
@container (min-width: 675px) {
  .grid-xs {
    --grid-size: 6;
  }
}
@container (min-width: 810px) {
  .grid-xs {
    --grid-size: 7;
  }
}
@container (min-width: 945px) {
  .grid-xs {
    --grid-size: 8;
  }
}
@container (min-width: 1080px) {
  .grid-xs {
    --grid-size: 9;
  }
}
@container (min-width: 1215px) {
  .grid-xs {
    --grid-size: 10;
  }
}
@container (min-width: 480px) {
  .grid-sm {
    --grid-size: 4;
  }
}
@container (min-width: 640px) {
  .grid-sm {
    --grid-size: 5;
  }
}
@container (min-width: 800px) {
  .grid-sm {
    --grid-size: 6;
  }
}
@container (min-width: 960px) {
  .grid-sm {
    --grid-size: 7;
  }
}
@container (min-width: 1120px) {
  .grid-sm {
    --grid-size: 8;
  }
}
@container (min-width: 1280px) {
  .grid-sm {
    --grid-size: 9;
  }
}
@container (min-width: 1440px) {
  .grid-sm {
    --grid-size: 10;
  }
}
@container (min-width: 720px) {
  .grid-md {
    --grid-size: 4;
  }
}
@container (min-width: 960px) {
  .grid-md {
    --grid-size: 5;
  }
}
@container (min-width: 1200px) {
  .grid-md {
    --grid-size: 6;
  }
}
.grid-lg {
  --grid-size: 2;
  --grid-fontsize: var(--base)
  --grid-radius: var(--radius-lg);
}
@container (min-width: 760px) {
  .grid-lg {
    --grid-size: 3;
  }
}
@container (min-width: 1140px) {
  .grid-lg {
    --grid-size: 4;
  }
}
.grid-xl {
  --grid-size: 1.5;
  --grid-fontsize: var(--base)
  --grid-radius: var(--radius-lg);
}
@container (min-width: 760px) {
  .grid-xl {
    --grid-size: 3;
  }
}
@container (min-width: 1140px) {
  .grid-xl {
    --grid-size: 4;
  }
}
@media (max-width: 959px) {
  .grid-xl .grid-items-wrap .grid-item {
    width: 100%;
  }
}
.grid-xxl {
  --grid-size: 1;
  --grid-fontsize: var(--base)
  --grid-radius: var(--radius-lg);
}
@container (min-width: 480px) {
  .grid-xxl {
    --grid-size: 2;
  }
}
@container (min-width: 960px) {
  .grid-xxl {
    --grid-size: 3;
  }
}
.grid-huge {
  --grid-size: 1;
  --grid-fontsize: var(--base)
  --grid-radius: var(--radius-lg);
}
@container (min-width: 480px) {
  .grid-huge {
    --grid-size: 2;
  }
}
.grid-product {
  --grid-size: 1.5;
}
@media (min-width: 960px) {
  .grid-product {
    --grid-size: 1;
  }
}
.grid-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: var(--grid-item);
}
.grid-item[disabled] {
  opacity: .2;
  order: 100;
}
.grid-item > * {
  min-height: 100%;
}
.grid-item-link {
  --grid-zoom: 1;
  display: block;
  min-width: 0;
}
.grid-item-link:hover, .grid-item-link:focus {
  --grid-zoom: 1.025;
}
.grid-item-image {
  transition: var(--element-transition);
  container-type: inline-size;
  background: var(--grid-item-bg);
  border-radius: var(--grid-radius);
}
.grid-item-image img {
  aspect-ratio: var(--grid-ratio);
  mix-blend-mode: multiply;
  border-radius: inherit;
}
.theme-dark .grid-item-image img {
  mix-blend-mode: normal;
}
.grid-item-badges {
  position: absolute;
  top: var(--grid-gap);
  left: var(--grid-gap);
  right: var(--grid-gap);
  bottom: var(--grid-gap);
}
.grid-item-badges-label {
  position: absolute;
  bottom: 0;
  left: 0;
}
.grid-item-text {
  padding-block: var(--grid-gap);
}
.grid-item-text strong {
  font-weight: 550;
}
.grid-item-text > * {
  margin-top: 0;
  margin-bottom: 0;
}
.grid-arrow {
  top: 0;
  position: absolute;
  transition: opacity .25s;
  transform: translateY(-50%);
  margin-top: calc(var(--grid-item) / var(--grid-ratio) / 2);
  pointer-events: none;
  opacity: 0;
}
.grid-arrows-center .grid-arrow {
  margin-top: 0;
  top: 50%;
}
.grid-arrow-left {
  left: calc(var(--gutter-x) - var(--control)/2);
}
.grid-overflow-left .grid-arrow-left {
  pointer-events: auto;
  opacity: 1;
}
.grid-arrow-right {
  right: calc(var(--gutter-x) - var(--control)/2);
}
.grid-overflow-right .grid-arrow-right {
  pointer-events: auto;
  opacity: 1;
}
@media (hover: none) {
  .grid-arrow {
    display: none;
  }
}
.grid-actions {
  position: absolute;
  top: 0;
  right: var(--gutter-x);
  margin: var(--grid-gap) var(--grid-gap) 0 0;
}

.table {
  width: 100%;
  max-width: 100vw;
  border-collapse: collapse;
  --table-align: top;
  margin-bottom: 1.5em;
}
.table tr {
  border-bottom: 1px solid color-mix(in srgb, transparent, currentColor 8%);
}
.table-ellipsis {
  table-layout: fixed;
}
.table-ellipsis tr > * {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.table td, .table th {
  vertical-align: var(--table-align);
  padding: 4px 16px;
  border-bottom: 1px solid var(--tint);
  padding-right: 0;
}
.table td:first-child, .table th:first-child {
  padding-left: 0;
}
.table td:last-child:not(:first-child), .table th:last-child:not(:first-child) {
  text-align: right;
}
.table th {
  padding-top: 8px;
  padding-bottom: 8px;
}
.table thead {
  font-size: var(--sm);
  font-weight: 600;
  color: var(--subtle);
}
.table-sm {
  --table-pad: 12px;
}
.table-sm td:not(:last-child), .table-sm th:not(:last-child) {
  padding-right: 0;
}
.table-flush {
  padding: 0 !important;
  vertical-align: middle;
}
.table-highlight {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.table-middle {
  --table-align: middle;
}
.table-hover tbody tr:hover {
  background: #f8f9fa;
}

.header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  min-height: var(--btn);
  gap: 16px;
}
.header-break {
  flex-wrap: wrap;
}
.header-middle {
  align-items: center;
}
.header-title {
  flex: 1;
}
.header-title > * {
  margin-block: var(--space);
}
.header-short {
  margin: 16px 0;
  min-height: auto;
}

.prompt-arrow {
  float: right;
}
.prompt-content > * {
  margin-block: var(--space);
}

.placeholder {
  background: var(--shade);
  padding: var(--gap);
  border-radius: var(--radius-lg);
  min-height: 320px;
}

.actions {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateY(50%);
}

.certs {
  margin: 1em 0;
  font-size: var(--sm);
}
.certs > * {
  break-inside: avoid;
}

.cert {
  line-height: 1;
  padding: 2px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.cert * {
  line-height: 1.25;
}
.cert-list {
  columns: 140px auto;
  flex: 1;
}
.cert img {
  width: 26px;
}
.cert-feature {
  margin-block: var(--pad);
}
.cert-svg {
  background: var(--blue);
  color: white;
  padding: 4px;
  border-radius: 8px;
  margin-right: 4px;
  box-shadow: 0 2px 14px -4px var(--blue);
}
.cert-svg svg {
  width: 32px;
  height: 32px;
  display: block;
  fill: currentColor;
}
.cert-img {
  font-size: 20px;
  border-radius: 50%;
}
.cert-lg img {
  width: 56px;
}
.cert-md {
  align-items: flex-start;
}
.cert-md img {
  width: 48px;
}

.nav {
  --menu: 0fr;
  --nav-inset: -12px;
  background: var(--bg);
}

.nav-primary {
  padding: var(--pad) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 959px) {
  .nav-primary {
    margin: var(--nav-inset) !important;
    margin-inline: var(--nav-inset);
    padding-bottom: var(--pad);
  }
}
@media (max-width: 959px) {
  .nav-primary-logo-image {
    top: -2px;
    width: 100%;
    max-width: 160px;
    margin: 0 auto;
  }
}
.nav-primary-logo-image svg {
  display: block;
  height: var(--control);
  width: 100%;
}
.nav-primary-search {
  flex: 1;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.nav-primary-search-form {
  margin: 0 auto;
  max-width: 560px;
}
.nav-primary-links, .nav-primary-menu {
  display: flex;
  align-items: center;
}
.nav-primary .button {
  font-weight: 550;
}

.nav-secondary {
  padding: 8px 0;
}
.nav-secondary-links {
  --nav-link-pad: 24px;
  padding-inline: var(--gutter-x);
  margin-inline: calc(var(--gutter-x) * -1);
  display: flex;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: var(--nav-link-pad);
  font-weight: 550;
}
.nav-secondary-links::-webkit-scrollbar {
  width: 0;
  height: 0;
}
@media (max-width: 959px) {
  .nav-secondary-links {
    --nav-link-pad: 12px;
  }
}
.nav-secondary-link {
  display: block;
  flex: 0 0 auto;
  white-space: nowrap;
}

.nav-menu {
  z-index: 10;
  display: grid;
  position: absolute;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: var(--layout-transition);
  font-size: var(--sm);
  left: 0;
  right: 0;
}
.nav:has(#fragrance-nav:is(:hover)) .nav-menu#fragrance-menu, .nav:has(#essential-nav:is(:hover)) .nav-menu#essential-menu, .nav:has(#candle-nav:is(:hover)) .nav-menu#candle-menu, .nav:has(#soap-nav:is(:hover)) .nav-menu#soap-menu, .nav:has(#articles-nav:is(:hover)) .nav-menu#articles-menu, .nav:has(#new-nav:is(:hover)) .nav-menu#new-menu, .nav:has(#account-nav:is(:hover)) .nav-menu#account-menu, .nav:has(#search-nav:is(:focus)) .nav-menu#search-menu, .nav-menu:hover, .nav-menu:focus, .nav-menu:focus-within {
  opacity: 1;
  pointer-events: auto;
}
.nav:has(#fragrance-nav:is(:hover)) .nav-menu#fragrance-menu:after, .nav:has(#essential-nav:is(:hover)) .nav-menu#essential-menu:after, .nav:has(#candle-nav:is(:hover)) .nav-menu#candle-menu:after, .nav:has(#soap-nav:is(:hover)) .nav-menu#soap-menu:after, .nav:has(#articles-nav:is(:hover)) .nav-menu#articles-menu:after, .nav:has(#new-nav:is(:hover)) .nav-menu#new-menu:after, .nav:has(#account-nav:is(:hover)) .nav-menu#account-menu:after, .nav:has(#search-nav:is(:focus)) .nav-menu#search-menu:after, .nav-menu:hover:after, .nav-menu:focus:after, .nav-menu:focus-within:after {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
  background: linear-gradient(rgba(0, 20, 40, 0.125), transparent);
  pointer-events: none;
}
.nav-menu > * {
  overflow: hidden;
}
.nav-menu-groups {
  columns: 4 240px;
  column-gap: var(--grid-gap);
}
.nav-menu-groups > * {
  margin-bottom: var(--grid-gap);
  break-inside: avoid;
}
.nav-menu-features > * {
  margin-bottom: var(--grid-gap);
}
.nav-menu-group {
  padding: var(--pad);
  border-radius: var(--radius);
  background: var(--shade);
}
.nav-menu-group > * {
  margin-top: 0;
  margin-bottom: 0;
}
.nav-menu-group ul {
  list-style-type: none;
  padding: 0;
}
.nav-menu-group-link {
  display: block;
  padding-left: var(--grid-gap);
  text-indent: calc(var(--grid-gap)*-1);
}
.nav-menu-group-sublink {
  text-indent: 0;
}

.nav-account {
  perspective: 100px;
  transform-style: preserve-3d;
}
.nav-account > * {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto !important;
  backface-visibility: hidden;
}
.nav-account-icon {
  animation: account-icon 5s forwards;
}
.nav-account-points {
  animation: account-points 5s forwards;
}

@keyframes account-icon {
  0%, 80%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  10%, 70% {
    transform: scale(0.5);
    opacity: 0;
  }
}
@keyframes account-points {
  0%, 10%, 70%, 100% {
    transform: scale(0.5);
    opacity: 0;
  }
  20%, 60% {
    transform: scale(1);
    opacity: 1;
  }
}
.preview {
  background: var(--shade);
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
}
.preview-image {
  aspect-ratio: 2;
  border-radius: 0;
}
.preview-text {
  padding: var(--gap-sm);
}
.preview-text strong {
  font-weight: 550;
}

.variant {
  --variant-details: 0fr;
  display: block;
  background: var(--shade);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  margin-block: 2px;
  font-size: var(--sm);
  cursor: pointer;
  transition: var(--layout-transition);
  display: flex;
  gap: var(--grid-gap);
}
.variant input {
  position: absolute;
  opacity: 0;
}
.variant .icon {
  top: 1px;
}
.variant-content {
  flex: 1;
  min-width: 0;
}
.variant-details {
  display: grid;
  grid-template-rows: var(--variant-details);
  transition: var(--layout-transition);
}
.variant-details-content {
  overflow: hidden;
}
.variant:hover {
  background: var(--shade2);
}
.variant .variant-checked {
  display: none;
}
.variant:has(input:checked) {
  background: var(--bg);
  --variant-details: 1fr;
  box-shadow: 0 5px 20px -5px rgba(0, 0, 0, 0.25), 0 0 0 2px currentColor;
  z-index: 2;
}
.variant:has(input:checked) .variant-unchecked,
.variant:has(input:checked) .variant-show {
  display: none;
}
.variant:has(input:checked) .variant-details-hide {
  display: none;
}
.variant-text {
  display: grid;
  width: 100%;
  gap: 0px;
  grid-template-areas: "title rate" "price notice";
  align-items: baseline;
}
@media (min-width: 960px) {
  .variant-text {
    gap: 12px;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "title price notice rate";
  }
}
.variant-title {
  font-weight: bold;
  font-size: var(--base);
  grid-area: title;
}
.variant-rate {
  opacity: .625;
  grid-area: rate;
  text-align: right;
}
.variant-notice {
  text-align: right;
}
.variant-price {
  grid-area: price;
}

.modal {
  z-index: 100;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: var(--layout-transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 959px) {
  .modal {
    align-items: flex-end;
  }
}
.modal:target, .modal-open {
  opacity: 1;
  pointer-events: auto;
}
.modal-overlay {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  background: rgba(0, 10, 20, 0.375);
}
.modal-content {
  width: 90%;
  height: 90%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, min-content) 1fr;
}
@media (min-width: 960px) {
  .modal-content-compact {
    width: 480px;
    height: 560px;
  }
}
.modal-sm .modal-content {
  height: auto;
  width: clamp(0px, 480px, 100vw);
}
@media (max-width: 959px) {
  .modal-content {
    align-content: flex-end;
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.modal-content > * {
  padding: var(--pad);
  min-width: 0;
}
.modal-header {
  grid-row: 1;
}
.modal-nav {
  grid-row: 2;
  display: flex;
}
.modal-nav-content {
  flex: 1;
}
.modal-nav-links {
  flex: 1;
  padding-inline: var(--pad);
  scroll-padding-inline: calc(var(--pad));
  margin-inline: calc(var(--pad) * -1);
  overflow: auto;
  margin-bottom: calc(var(--pad) * -1) !important;
  padding-bottom: var(--pad);
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  gap: var(--space);
}
.modal-nav-links::-webkit-scrollbar {
  width: 0;
  height: 0;
}
@media (min-width: 960px) {
  .modal-nav-links {
    flex-wrap: wrap;
  }
}
.modal-nav-links .button {
  flex: none;
}
.modal-nav-actions .button {
  box-shadow: 0 0 0 8px var(--bg);
}
.modal-body {
  transition: var(--layout-transition);
  grid-row: 3;
  min-height: 0;
  overflow: auto;
}
.modal-body:not(.modal-body-pad) {
  padding-top: 0;
}
.modal-body-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 12px;
}

.choices {
  columns: 320px auto;
  column-gap: calc(var(--pad) * 2);
  column-rule: 1px solid color-mix(in srgb, currentColor, transparent 90%);
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--grid-gap);
  padding-bottom: var(--gap-sm);
  break-inside: avoid;
}
.choice-text {
  flex: 1;
  min-width: 0;
}
.choice-text strong {
  font-weight: 550;
}
.choice-quantity {
  display: flex;
  background: var(--shade);
  border-radius: 100px;
  justify-content: center;
  min-width: var(--control);
}
.choice-quantity-number {
  display: block;
  font-weight: bold;
  text-align: center;
  min-width: 1.5em;
}

.banner {
  --banner-pad: calc(var(--gap) * 1.5);
  container-type: inline-size;
  display: grid;
  contain: paint;
  border-radius: var(--radius-lg);
}
@media (max-width: 959px) {
  .banner {
    margin-inline: calc(var(--gap) * -1);
    border-radius: 0;
  }
}
.banner-text {
  z-index: 2;
  font-size: var(--lg);
  padding: var(--banner-pad);
}
.banner-overlap .banner-text {
  background: transparent !important;
}
.banner-image img {
  border-radius: inherit;
}
@media (max-width: 959px) {
  .banner-image-desktop {
    display: none;
  }
}
@media (min-width: 960px) {
  .banner-image-mobile {
    display: none;
  }
}
@media (min-width: 960px) {
  .banner {
    grid-template-columns: clamp(0px, 620px, 60%) 1fr;
  }
  .banner > * {
    grid-row: 1;
  }
  .banner-text {
    grid-column: 1;
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  .banner-image {
    margin-left: calc(var(--radius-lg) * -2);
    grid-column: 2;
  }
  .banner-image img {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
  }
  .banner-overlap .banner-image {
    grid-column: 1 / span 2;
    margin: 0;
  }
}
@media (max-width: 959px) {
  .banner {
    --banner-pad: calc(var(--gap) * 1.5);
    grid-template-columns: 1fr;
  }
  .banner > * {
    grid-column: 1;
  }
  .banner-text {
    grid-row: 2;
  }
  .banner-overlap {
    grid-template-rows: 1fr 1fr;
  }
  .banner-overlap .banner-text {
    padding-bottom: 0;
    grid-row: 1;
  }
  .banner-overlap .banner-image {
    margin-top: 0;
    grid-row: 1 / span 2;
  }
  .banner-overlap .banner-image-mobile {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
  }
}

.notify {
  font-size: var(--sm);
  font-weight: bold;
}

.breadcrumbs {
  font-size: var(--sm);
}
.breadcrumbs ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.breadcrumbs ul li:not(:last-child):after {
  content: '>';
  padding: 0 8px;
}
@media (max-width: 959px) {
  .breadcrumbs {
    padding-top: var(--grid-gap);
  }
}

.report {
  padding: var(--pad);
  margin: var(--pad) 0;
  background: color-mix(in srgb, var(--yellow), white);
  border-radius: var(--radius-lg);
  font-size: var(--sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pad);
}
@media (max-width: 959px) {
  .report {
    display: block;
  }
}
@media (max-width: 959px) {
  .report-section {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
  }
}
.report-section > * {
  margin-top: 0;
  margin-bottom: 0;
}
.report-section-title {
  align-self: center;
}

.faq {
  font-size: var(--sm);
  --faq-pad: 16px;
}
.faq-lg {
  --faq-pad: 24px;
}
.faq:not(:last-child) {
  border-bottom: 1px solid var(--tint);
}
.faq-question {
  padding: var(--faq-pad) 0;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.faq-simple {
  border: 0 !important;
  --faq-pad: 8px;
}
.faq-simple .icon {
  color: var(--link);
  font-size: 18px;
  top: 1px;
}
.faq-simple .faq-question {
  align-items: center;
  gap: 6px;
}
.faq-answer {
  padding-bottom: 24px;
}
.faq[open] .faq-open, .faq:not([open]) .faq-close {
  display: none;
}

.doc {
  background: var(--shade);
}
.doc h3 {
  margin-top: 0;
  padding-top: 1em;
}
.doc-group, .doc-panel {
  margin: 2em 0;
}
.doc-group:empty, .doc-panel:empty {
  display: none;
}
.doc-panel, .doc-outline {
  background: var(--white);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
  padding: var(--gap);
}
@media (max-width: 959px) {
  .doc-panel, .doc-outline {
    margin-inline: calc(var(--gutter-x) * -1);
    border-radius: 0;
  }
}
.doc-outline {
  font-size: var(--sm);
}
@media (min-width: 960px) {
  .doc-outline {
    position: sticky;
    top: 0px;
  }
}
.doc-panel {
  contain: paint;
}
.scenes .doc-panel {
  background: var(--shade2);
  box-shadow: none;
  contain: none;
}
.doc-panel > img:first-child,
.doc-panel > p:has(img):first-child,
.doc-panel > blockquote:first-child {
  margin-inline: calc(var(--gap) * -1);
  margin-top: calc(var(--gap) * -1) !important;
}
.doc-panel > img:first-child, .doc-panel > img:first-child img,
.doc-panel > p:has(img):first-child,
.doc-panel > p:has(img):first-child img,
.doc-panel > blockquote:first-child,
.doc-panel > blockquote:first-child img {
  border-radius: 0;
}
.doc-panel > blockquote {
  font-weight: bold;
}
.doc hr {
  display: none;
}
.doc ul:has(img) {
  margin: 2em auto;
  max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--xs);
  font-style: oblique;
}
.doc ul:has(img), .doc ul:has(img) li {
  list-style-type: none;
  padding: 0;
}
.doc ul:has(img) li {
  padding: 2%;
  flex: 0 0 50%;
}
.doc ul:has(img) li img {
  border-radius: var(--radius);
  display: block;
  top: -8px;
}
.doc ul:has(img) li:has(img[src*="avoid"]):after {
  content: '';
  display: block;
  height: 4px;
  background: #d00;
  position: absolute;
  width: 125%;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  box-shadow: 0 4px 0 white;
  transform: translate(-50%, calc(-50% - 16px)) rotate(36.25deg);
}

.editor a {
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, currentColor, transparent);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
}
.editor img,
.editor p:has(img) {
  margin-block: var(--margin-lg);
}

.stars {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
  top: -1px;
}

.product > * {
  margin-block: var(--gap-sm);
}

.options {
  margin: 1em 0;
}
.options-label {
  display: block;
  text-transform: capitalize;
  margin-bottom: 0.5em;
  font-weight: bold;
  font-size: var(--sm);
}
.options-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  align-items: center;
}

.option {
  cursor: pointer;
  border-radius: 8px;
  color: var(--color);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
  font-weight: normal;
  text-align: left;
}
.option-full {
  width: 100%;
  display: block;
  white-space: normal;
}
.option-only {
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
}
.option-extra {
  font-size: var(--sm);
  font-weight: normal;
  display: grid;
  grid-template-rows: 0fr;
  transition: all .25s ease;
}
.option-selected .option-extra {
  grid-template-rows: 1fr;
}
.option-extra-description {
  overflow: hidden;
}
.option-selected {
  background: var(--bg) !important;
  color: var(--heading);
  box-shadow: inset 0 0 0 2px var(--heading), 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.option-simple {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.option-disabled {
  --option-decoration: line-through;
  opacity: .5;
}
.option-text {
  --option-bold: bold;
}
.option-full .option-text {
  display: grid;
  grid-template-columns: auto 1fr 64px;
  grid-template-areas: "title rate price" "note note note";
  align-items: baseline;
  grid-column-gap: 16px;
}
@media (max-width: 959px) {
  .option-full .option-text {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "title rate price" "note note note";
  }
}
.option-text-sm {
  --option-bold: normal;
  --option-decoration: none;
  font-size: var(--xs);
  color: var(--subtle);
}
.option-title {
  grid-area: title;
  font-weight: var(--option-bold);
  text-decoration: var(--option-decoration);
}
.option-price {
  grid-area: price;
  font-weight: bold;
  text-align: right;
}
.option-rate {
  grid-area: rate;
  font-size: var(--xs);
  text-align: right;
  color: var(--subtle);
}
.option-note {
  grid-area: note;
  font-size: var(--xs);
  color: var(--subtle);
}
.option-edit {
  font-size: var(--xs);
}

.notices-list {
  display: grid;
  overflow: hidden;
}
.notices-list .notice {
  grid-row: 1;
  grid-column: 1;
  transition: opacity 1s;
}
.notices-list .notice:not(.notice-current) {
  opacity: 0;
}

.notice {
  background: var(--shade);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--sm);
}
.notice-green {
  background: #f3faed;
  color: #3f8100;
  --heading: #3f8100;
}
.notice-blue {
  background: #edfbfa;
  color: #008074;
  --heading: #008074;
}
.notice-nav {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 2;
}
.notice-action, .notice-info {
  color: var(--heading);
  font-weight: 600;
  display: inline-block;
  text-decoration: underline;
  white-space: nowrap;
  z-index: 2;
}
.notice-overlay {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  text-indent: -1000vw;
}
.notice-body {
  display: block;
  padding: 16px clamp(var(--control), var(--gutter-x), 100vw) 16px var(--gutter-x);
}
.notice-body > * {
  display: inline;
  margin-right: .5em;
}

.color-picker {
  display: grid;
  grid-template-columns: repeat(96, 1fr);
  margin: 2em 0;
}
.color-picker-swatch {
  display: block;
  aspect-ratio: 1;
}

.swatches {
  --swatch-ratio: 1;
  --swatch-radius: var(--radius);
  margin: 2em 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.swatches-sm {
  --swatch-ratio: 1;
  --swatch-radius: 50%;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.swatches-xs {
  --swatch-ratio: 1;
  --swatch-radius: 0;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 0;
}
.swatches .swatch {
  text-align: center;
  aspect-ratio: var(--swatch-ratio);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: var(--swatch-radius);
}

.comparison {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 16px 0;
}
.comparison-low, .comparison-high {
  width: 140px;
}
.comparison-range {
  flex: 1;
}
.comparison-low {
  text-align: right;
}

.cleanscents-chart {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: 8px;
  margin: 16px 0;
}
.cleanscents-chart-auto {
  display: flex;
  flex-wrap: wrap;
}
.cleanscents-chart-auto img {
  width: 56px;
}
.cleanscents-chart img {
  aspect-ratio: 1;
  border-radius: 15%;
  background: red;
}