:root {
  font-family: Geologica, Arial, sans-serif;
  color: #171717;
  font-size: 15px;
  background: #f5f2e9;
  --orange: #ff4a2e;
}
* { box-sizing: border-box; }
body { margin: 0; }
.cover { min-height: 100svh; display: grid; align-content: center; justify-items: start; padding: 8vw; gap: 14px; }
.cover h1 { max-width: 1000px; font-size: 20px; line-height: 1.18; letter-spacing: -.045em; margin: 0; }
.cover a, .result a { color: inherit; text-underline-offset: 4px; text-decoration-color: var(--orange); }
.brand { font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.brand span { color: var(--orange); }
button, input { font: inherit; }
button { border: 1px solid transparent; border-radius: 100px; background: var(--orange); color: white; font-size: 13px; font-weight: 400; padding: 12px 20px; min-height: 44px; cursor: pointer; }
button:disabled { opacity: .42; cursor: default; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
#question:focus-visible { outline: none; }
dialog { width: min(640px, calc(100% - 24px)); max-height: min(790px, calc(100dvh - 24px)); border: 0; border-radius: 24px; padding: 0; background: #fffdf9; color: inherit; }
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: #151515a0; }
header { position: relative; background: #f5f2e9; color: #171717; padding: 24px 28px 16px; }
header h2 { margin: 20px 0 8px; font-size: 18px; letter-spacing: -.04em; }
header p { color: #171717; margin: 0 0 10px; line-height: 1.45; }
.close { position: absolute; inset: 10px 12px auto auto; padding: 0; width: 44px; background: transparent; color: #171717; font-size: 15px; }
progress { width: 100%; height: 5px; border: 0; display: block; accent-color: var(--orange); }
form { display: flex; flex-direction: column; min-height: 0; }
#content { padding: 22px 28px; overflow: auto; }
footer { display: flex; gap: 12px; justify-content: flex-end; padding: 16px 28px; border-top: 1px solid #e5e1de; }
.secondary, .option { color: inherit; background: white; border-color: #d9d3ca; }
.option[aria-pressed="true"] { border-color: var(--orange); background: #fff0eb; }
.options { display: flex; flex-wrap: wrap; gap: 6px; }
input { width: 100%; margin: 8px 0 16px; padding: 12px; border: 1px solid #c6beb4; border-radius: 12px; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; }
legend { margin-bottom: 8px; font-weight: 400; }
details { margin-top: 16px; }
summary { cursor: pointer; font-weight: 400; margin-bottom: 8px; }
.result { padding: 14px 0; border-bottom: 1px solid #e5e1de; }
.result h3, .result p { margin: 0 0 6px; }
.result p { line-height: 1.4; }
body:has(.quiz-inline[open]) :is(.cover, #shop-menu) { display: none; }
dialog:not(.quiz-inline) > [data-shop-header] { display: none; }
dialog.quiz-inline[open] {
  position: static;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border-radius: 0;
}
.quiz-inline > header, .quiz-inline footer { flex-shrink: 0; }
.quiz-inline form, .quiz-inline #content { flex: 1; }
@media (max-width: 540px) {
  dialog { margin: auto auto 0; width: 100%; max-width: 100%; max-height: calc(100dvh - 10px); border-radius: 20px 20px 0 0; }
  header, #content, footer { padding-inline: 18px; }
  footer button { flex: 1; }
}

.cover h1, header h2 { font-family: Unbounded, Geologica, sans-serif; }
.cover a, .result a { color: var(--orange); }
header .brand { color: var(--orange); font-weight: 400; padding-inline-end: 40px; }
header h2 { line-height: 1.25; }
progress::-webkit-progress-bar { background: #e5dcd1; }
progress::-webkit-progress-value { background: var(--orange); }
progress::-moz-progress-bar { background: var(--orange); }
input[type="email"] { border-color: var(--orange); }
.option { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 12px; line-height: 1.25; }
.option img, .option svg { flex: none; width: 18px; height: 18px; }
.option img { border-radius: 50%; object-fit: cover; }
.option svg { color: #171717; }
.result { display: flex; gap: 14px; align-items: flex-start; }
.result img { flex: none; width: clamp(58px, 15vw, 92px); aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.result .inspiration { color: #171717; font-size: 14px; }

.cover { width: min(100%, 720px); margin-inline: auto; padding: clamp(18px, 5vw, 44px); }
.cover-photo { display: block; width: 100%; height: auto; border-radius: 22px; }
.cover h1 { letter-spacing: -.015em; }
.cover p { margin: 0; }
.cover .catalog-link { font-size: 12px; }
h3 { font-size: 15px; }
#start, #next { text-transform: uppercase; }
#start:not(:disabled):hover, #next:not(:disabled):hover { background: #171717; }
button, a, input, summary { -webkit-tap-highlight-color: #ff4a2e30; }
.notes-summary { color: var(--orange); font-weight: 400; }
.result-note { margin-block: 0 10px; }

.result .matched-notes { color: #666; font-size: 13px; }

#saved-picks { width: 100%; padding: 18px; background: #fffdf9; border-radius: 20px; }
#saved-heading { margin: 0; font: 500 18px Unbounded, Geologica, sans-serif; }
#restart { margin-top: 14px; text-transform: uppercase; }

[data-shop-header] { flex-shrink: 0; border-bottom: 1px solid #ded8cc; background: #fffdf9; }
.shop-header { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(2px, 1.5vw, 10px); padding: 7px clamp(8px, 3vw, 24px); min-height: 64px; }
.shop-drawer { margin: 0; }
.shop-icon { display: grid; place-items: center; width: clamp(32px, 10vw, 44px); height: 44px; margin: 0; color: #171717; text-decoration: none; list-style: none; }
.shop-icon::-webkit-details-marker, .shop-panel summary::-webkit-details-marker { display: none; }
.shop-logo { display: block; width: clamp(90px, 36vw, 150px); }
.shop-logo img { display: block; width: 100%; height: auto; }
.shop-panel { position: absolute; inset: calc(100% - 4px) clamp(10px, 3vw, 24px) auto; max-height: min(66dvh, 520px); overflow: auto; padding: 12px 16px; background: #fffdf9; border: 1px solid #d9d6d0; border-radius: 13px; box-shadow: 0 8px 20px #17171714; }
.shop-panel details { margin: 0; }
.shop-panel > a, .shop-panel summary, .shop-picker { display: flex; width: 100%; align-items: center; min-height: 42px; margin: 0; padding: 6px 0; background: transparent; color: #171717; font-size: 15px; font-weight: 700; text-align: start; text-decoration: none; border: 0; border-radius: 0; list-style: none; }
.shop-panel summary::after { content: ""; width: 7px; height: 7px; margin-inline: auto 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.shop-panel details[open] > summary::after { transform: rotate(225deg); }
.shop-submenu { display: grid; padding: 0 0 8px 12px; }
.shop-menu-column { display: grid; align-content: start; }
.shop-menu-cards, .shop-menu-heading { display: none; }
.shop-submenu a { padding-block: 6px; color: inherit; font-size: 13px; text-decoration: none; }
.shop-panel a:hover, .shop-picker:hover { color: var(--orange); }
.cover { min-height: calc(100svh - 65px); }
@media (max-width: 540px) {
  .cover { min-height: 0; padding-block: 24px; justify-items: center; text-align: center; }
  .cover .result { text-align: start; }
}

#back:not([hidden]) { display: grid; place-items: center; flex: 0 0 44px; width: 44px; padding: 0; }
@media (max-width: 540px) {
  input[type="email"] { font-size: 16px; }
}

.shop-desktop { display: none; }
@media (min-width: 1050px) {
  #shop-menu .shop-header { min-height: 56px; gap: 1.5vw; padding: 0 16px; }
  #shop-menu .shop-drawer { display: none; }
  .cover { min-height: calc(100svh - 57px); }
  #shop-menu .shop-logo { flex: none; width: 152px; }
  .shop-desktop { display: flex; flex: 1; align-items: center; gap: clamp(14px, 1.5vw, 28px); }
  .shop-desktop details { position: relative; margin: 0; }
  .shop-desktop > a, .shop-desktop summary, .shop-desktop .shop-picker {
    display: inline-flex; align-items: center; gap: 10px; width: auto; min-height: 34px;
    margin: 0; padding: 8px 0; color: #151515; font-family: Geologica, Arial, sans-serif; font-size: 14px;
    font-weight: 500; line-height: 1.3; letter-spacing: normal; font-variant-numeric: proportional-nums;
    text-decoration: none; white-space: nowrap; list-style: none;
  }
  .shop-desktop .shop-picker { background: transparent; border: 0; }
  .shop-desktop summary::-webkit-details-marker { display: none; }
  .shop-desktop summary::after {
    content: ""; width: 7px; height: 7px; border: solid currentColor;
    border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
  }
  .shop-desktop details[open] > summary::after { transform: rotate(225deg); }
  .shop-desktop .shop-submenu {
    position: absolute; inset: 100% 0 auto auto; min-width: 255px; max-height: 65dvh;
    overflow: auto; padding: 14px 22px; background: #fffdf9;
    border: 1px solid #d9d6d0; border-radius: 12px; box-shadow: 0 8px 20px #17171714;
  }
  .shop-desktop .shop-submenu a { font-size: 14px; line-height: 1.3; padding-block: 8px; }
  .shop-desktop .shop-customers .shop-submenu a { font-weight: 500; padding-block: 12px; }
  .shop-desktop :is(.shop-aromas, .shop-about) { position: static; }
  .shop-desktop :is(.shop-aromas, .shop-about) .shop-submenu {
    inset: 100% 0 auto; padding: 24px 16px 44px; border: 0; border-radius: 0;
  }
  .shop-desktop .shop-about .shop-submenu a { justify-self: start; }
  .shop-desktop .shop-aromas .shop-submenu {
    grid-template-columns: min(44%, 597px) repeat(3, minmax(0, 300px));
    align-items: start; gap: clamp(14px, 1.5vw, 24px);
  }
  .shop-desktop .shop-menu-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 24px); }
  .shop-desktop .shop-menu-cards img { display: block; width: 100%; height: auto; border-radius: 4px; margin-bottom: 6px; }
  .shop-desktop .shop-menu-heading { display: block; margin: 8px 0 10px; font-size: 14px; font-weight: 600; }
  .shop-desktop a:hover, .shop-desktop .shop-picker:hover,
  .shop-desktop summary:hover, .shop-desktop details[open] > summary { color: var(--orange); }
}