/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import url("./variables/base.css");
@import url("./variables/beautyrest.css");
@import url("./variables/serta.css");
@import url("./variables/tuftandneedle.css");

:root {
  font-size: 62.5%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Typography Classes */
body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--text-color);
}

/* Headings */
h1,
.h1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  margin-bottom: var(--spacing-20);
  font-weight: var(--font-weight-medium);
}

h2,
.h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  margin-bottom: var(--spacing-36);
  font-weight: var(--font-weight-medium);
}

h3,
.h3 {
  font-family: var(--font-family-heading-secondary);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  margin-bottom: var(--spacing-40);
  font-weight: var(--font-weight-semibold);
}

h4,
.h4 {
  font-family: var(--font-family-heading-tertiary);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  margin-bottom: var(--spacing-12);
  font-weight: var(--font-weight-semibold);
}

h5,
.h5 {
  font-family: var(--font-family-heading-tertiary);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  margin-bottom: var(--spacing-12);
  font-weight: var(--font-weight-semibold);
}

h6,
.h6 {
  font-family: var(--font-family-heading-tertiary);
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  margin-bottom: var(--spacing-12);
  font-weight: var(--font-weight-semibold);
}

/* Paragraphs */
.default-content-wrapper p {
  margin: var(--spacing-16) 0;
}

header .default-content-wrapper p {
  margin: 0;
}

/* Font weights */
.font-light {
  font-weight: var(--font-weight-light);
}

.font-regular {
  font-weight: var(--font-weight-regular);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

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

/* Text sizes */
.text-lg {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

.text-md {
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

.text-sm {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.text-xs {
  font-size: var(--font-size-xs);
}

body.beautyrest .bg-core {
  background-color: var(--color-core-500);
}

body.beautyrest .bg-world {
  background-color: var(--color-world-500);
}

body.beautyrest .bg-accent {
  background-color: var(--color-accent-500);
}

body.beautyrest .bg-black {
  background-color: var(--color-black-500);
}

body.beautyrest .bg-sleep {
  background-color: var(--color-sleep-500);
}

body.beautyrest .text-core {
  color: var(--color-core-500);
}

body.beautyrest .text-world {
  color: var(--color-world-500);
}

body.beautyrest .text-accent {
  color: var(--color-accent-500);
}

body.beautyrest .text-black {
  color: var(--color-black-500);
}

body.beautyrest .text-sleep {
  color: var(--color-sleep-500);
}

/* Tuft & Needle utility classes */
body.tuftandneedle .bg-pine {
  background-color: var(--color-pine-500);
}

body.tuftandneedle .bg-moss {
  background-color: var(--color-moss-500);
}

body.tuftandneedle .bg-persimmon {
  background-color: var(--color-persimmon-500);
}

body.tuftandneedle .bg-glacier {
  background-color: var(--color-glacier-500);
}

body.tuftandneedle .bg-bone {
  background-color: var(--color-bone-500);
}

body.tuftandneedle .text-pine {
  color: var(--color-pine-500);
}

body.tuftandneedle .text-moss {
  color: var(--color-moss-500);
}

body.tuftandneedle .text-persimmon {
  color: var(--color-persimmon-500);
}

body.tuftandneedle .text-glacier {
  color: var(--color-glacier-500);
}

body.tuftandneedle .text-bone {
  color: var(--color-bone-500);
}

body.appear {
  display: block;
  transition: overflow 0.2s ease;
}

/* Prevent scrolling when full-height menu is open */
body.overlay-hidden {
  /* overflow: hidden; */
}

header {
  min-height: calc(var(--nav-height) + var(--utility-banner-height));
}

header.has-pencil-banner {
  min-height: calc(var(--nav-height) + var(--utility-banner-height) + var(--header-banner-height));
}

header:has(.nav-pencil-banner) {
  height: var(--header-height);
}



header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

@media (width >=1200px) {
  body[data-breadcrumbs] {
    --header-height: calc(var(--utility-banner-height) + var(--nav-height) + var(--breadcrumbs-height));
  }

  body[data-breadcrumbs]:has(.nav-pencil-banner) {
    --header-height: calc(var(--header-height) + var(--breadcrumbs-height));
  }
}

code,
pre {
  font-size: var(--font-size-sm);
}

pre {
  padding: var(--spacing-16);
  border-radius: var(--spacing-8);
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

main>div {
  margin: var(--spacing-40) var(--spacing-16);
}

input,
textarea,
select,
button {
  font: inherit;
}

/* links */
a:any-link {
  color: inherit;
  word-break: break-word;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* buttons */
a.button:any-link,
button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--button-width);
  max-width: 100%;
  width: fit-content;
  height: var(--button-height);
  margin: 0;
  padding: var(--spacing-12) var(--spacing-18);
  font-family: var(--font-family-paragraph);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  text-decoration: none;
  background-color: var(--color-button);
  color: var(--color-button-text);
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: var(--button-border-radius);
  border: 1px solid var(--color-button);
}

a.button:hover,
button:hover {
  background-color: var(--color-button-hover);
  border-color: var(--color-button-hover);
  color: var(--color-button-hover-text);
  cursor: pointer;
}

/* stylelint-disable no-descending-specificity */
a.button:hover img,
button:hover img {
  filter: brightness(0) var(--icon-white);
}

button:disabled,
button:disabled:hover {
  background-color: var(--light-color);
  cursor: unset;
}

/* Secondary Button */
a.button.secondary,
button.secondary {
  background-color: var(--color-button-secondary);
  border-color: var(--color-button-hover);
  color: var(--color-button-hover);
}

a.button.secondary:hover,
button.secondary:hover {
  background-color: var(--color-button-hover);
  color: var(--color-button-hover-text);
}

/* Tertiary Buttons */
a.button.tertiary {
  background: unset;
  border: none;
  padding: 0;
  min-width: auto;
  height: auto;
  color: inherit;
}

a.button.tertiary:hover {
  text-decoration: underline;
}

a.button.tertiary:hover img {
  filter: inherit;
}

/* Buttons - White */
.cta-white a.button {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-button-white);
}

.cta-white a.button img {
  filter: brightness(0) var(--icon-black);
}

.cta-white a.button:hover,
.cta-white button:hover {
  background-color: var(--color-button-hover);
  border-color: var(--color-button-hover);
  color: var(--color-button-hover-text);
  cursor: pointer;
}

.cta-white a.button:hover img,
.cta-white button:hover img {
  filter: brightness(0) var(--icon-white);
}

.cta-white a.button.secondary {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.cta-white a.button.secondary img {
  filter: brightness(0) var(--icon-white);
}

.cta-white a.button.secondary:hover {
  background-color: var(--color-white);
  color: var(--color-button-white);
}

.cta-white a.button.secondary:hover img {
  filter: var(--icon-black);
}

.cta-white a.button.tertiary {
  background-color: transparent;
  color: var(--color-white);
}

.cta-white a.button.tertiary img {
  filter: var(--icon-white);
}

/* Make consecutive buttons appear in one line when section has cta-horizontal class */
.cta-horizontal .button-container {
  display: inline-flex;
  margin-right: var(--spacing-12);
}

.cta-horizontal .button-container:last-of-type {
  margin-right: 0;
}

.ot-floating-button button {
  min-width: auto;
}

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

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* sections */
main > .section {
  max-width: 100%;
}

main > .section:not([class*="p-y-"], .has-uniform-padding, .full-height, .enrichment-container) {
  padding-block: var(--spacing-96);
}

main > .section:not([class*="p-x-"], .has-uniform-padding, .full-width) {
  padding-inline: var(--layout-padding-inline);
}

main > .section:not([class*="m-y-"], .has-uniform-margin) {
  margin-block: 0;
}

main > .section:not([class*="m-x-"], .has-uniform-margin) {
  margin-inline: auto;
}

main>.section.full-width,
main>.section.apply-background {
  max-width: 100%;
  padding-inline: unset;
}

main>.section.apply-background {
  background: var(--secondary-background);
}

main>.section>div {
  max-width: var(--layout-max-width);
  margin: auto;
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
}

main .section.light:not([class*="p-y-"], .has-uniform-padding),
main .section.highlight:not([class*="p-y-"], .has-uniform-padding) {
  padding-block: var(--spacing-40);
}

main .section.light:not([class*="p-x-"], .has-uniform-padding),
main .section.highlight:not([class*="p-x-"], .has-uniform-padding) {
  padding-inline: 0;
}

main .section.light:not([class*="m-y-"], .has-uniform-margin),
main .section.highlight:not([class*="m-y-"], .has-uniform-margin) {
  margin-block: 0;
}

main .section.light:not([class*="m-x-"], .has-uniform-margin),
main .section.highlight:not([class*="m-x-"], .has-uniform-margin) {
  margin-inline: 0;
}

.button-container {
  margin-top: var(--spacing-48);
}

/* button with images */
.button-container .button:has(img) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-6);
}

.button img {
  filter: brightness(0) var(--button-icon-color);
}

.button:hover img {
  filter: unset;
}

.button.secondary img {
  filter: var(--button-secondary-icon-color, var(--button-icon-color));
}

.button.tertiary img {
  filter: var(--icon-default-color);
}

.button.secondary:hover img {
  filter: unset;
}


/* Backgrounds */
.background-transparent {
  background: var(--color-transparent);
}

.background-white {
  background: var(--color-white);
}

.background-black {
  background: var(--background-black);
  color: var(--color-white);
}

.background-secondary {
  background: var(--background-secondary);
  color: var(--background-secondary-text-color, var(--text-color));
}

.background-tertiary {
  background: var(--background-tertiary);
  color: var(--background-tertiary-text-color, var(--text-color));
}

.background-quaternary {
  background: var(--background-quaternary);
  color: var(--background-quaternary-text-color, var(--text-color));
}

.background-quinary {
  background: var(--background-quinary);
}

.background-senary {
  background: var(--background-senary);
  color: var(--background-senary-text-color, var(--text-color));
}

.background-septenary {
  background: var(--background-septenary);
}

.background-beautysleep {
  background: var(--background-beautysleep);
}

.background-beautysleep-secondary {
  background: var(--background-beautysleep-secondary);
}

.background-worldclass {
  background: var(--background-worldclass);
}

.background-worldclass-secondary {
  background: var(--background-worldclass-secondary);
  color: var(--color-white);
}

.background-worldclass-gradient {
  background: var(--background-worldclass-gradient);
  color: var(--color-white);
}

.background-gradient {
  background: var(--background-gradient);
  color: var(--background-gradient-text-color, var(--text-color-gradient));
}

.background-gradient-secondary {
  background: var(--background-gradient-secondary);
  color: var(--text-color-gradient);
}

/* Alignments */
.align-center .default-content-wrapper,
.align-center.block {
  text-align: center;
}

.align-left .default-content-wrapper,
.align-left.block {
  text-align: left;
}

.align-right .default-content-wrapper,
.align-right.block {
  text-align: right;
}

.align-center-cta .default-content-wrapper .button-container .button,
.align-center-cta.block .button-container .button {
  margin-inline: auto;
}

.align-left-cta .default-content-wrapper .button-container .button,
.align-left-cta.block .button-container .button {
  margin-left: 0;
}

.align-right-cta .default-content-wrapper .button-container .button,
.align-right-cta.block .button-container .button {
  margin-left: auto;
}

.align-center-heading.block h1,
.align-center-heading.block h2,
.align-center-heading.block h3,
.align-center-heading.block h4,
.align-center-heading.block h5,
.align-center-heading.block h6 {
  text-align: center;
}

.align-left-heading.block h1,
.align-left-heading.block h2,
.align-left-heading.block h3,
.align-left-heading.block h4,
.align-left-heading.block h5,
.align-left-heading.block h6 {
  text-align: left;
}

.align-right-heading.block h1,
.align-right-heading.block h2,
.align-right-heading.block h3,
.align-right-heading.block h4,
.align-right-heading.block h5,
.align-right-heading.block h6 {
  text-align: right;
}

.section.align-center-heading .default-content-wrapper h1,
.section.align-center-heading .default-content-wrapper h2,
.section.align-center-heading .default-content-wrapper h3,
.section.align-center-heading .default-content-wrapper h4,
.section.align-center-heading .default-content-wrapper h5,
.section.align-center-heading .default-content-wrapper h6 {
  text-align: center;
}

.section.align-left-heading .default-content-wrapper h1,
.section.align-left-heading .default-content-wrapper h2,
.section.align-left-heading .default-content-wrapper h3,
.section.align-left-heading .default-content-wrapper h4,
.section.align-left-heading .default-content-wrapper h5,
.section.align-left-heading .default-content-wrapper h6 {
  text-align: left;
}

.section.align-right-heading .default-content-wrapper h1,
.section.align-right-heading .default-content-wrapper h2,
.section.align-right-heading .default-content-wrapper h3,
.section.align-right-heading .default-content-wrapper h4,
.section.align-right-heading .default-content-wrapper h5,
.section.align-right-heading .default-content-wrapper h6 {
  text-align: right;
}

/* Spacing */
.p-8 {
  padding: var(--spacing-8);
}

.p-x-8 {
  padding-inline: var(--spacing-8);
}

.p-y-8 {
  padding-block: var(--spacing-8);
}

.p-16 {
  padding: var(--spacing-16);
}

.p-x-16 {
  padding-inline: var(--spacing-16);
}

.p-y-16 {
  padding-block: var(--spacing-16);
}

.p-24 {
  padding: var(--spacing-24);
}

.p-x-24 {
  padding-inline: var(--spacing-24);
}

.p-y-24 {
  padding-block: var(--spacing-24);
}

.p-32 {
  padding: var(--spacing-32);
}

.p-x-32 {
  padding-inline: var(--spacing-32);
}

.p-y-32 {
  padding-block: var(--spacing-32);
}

.p-40 {
  padding: var(--spacing-40);
}

.p-x-40 {
  padding-inline: var(--spacing-40);
}

.p-y-40 {
  padding-block: var(--spacing-40);
}

.p-48 {
  padding: var(--spacing-48);
}

.p-x-48 {
  padding-inline: var(--spacing-48);
}

.p-y-48 {
  padding-block: var(--spacing-48);
}

.p-56 {
  padding: var(--spacing-56);
}

.p-x-56 {
  padding-inline: var(--spacing-56);
}

.p-y-56 {
  padding-block: var(--spacing-56);
}

.p-64 {
  padding: var(--spacing-64);
}

.p-x-64 {
  padding-inline: var(--spacing-64);
}

.p-y-64 {
  padding-block: var(--spacing-64);
}

.p-72 {
  padding: var(--spacing-72);
}

.p-x-72 {
  padding-inline: var(--spacing-72);
}

.p-y-72 {
  padding-block: var(--spacing-72);
}

.p-80 {
  padding: var(--spacing-80);
}

.p-x-80 {
  padding-inline: var(--spacing-80);
}

.p-y-80 {
  padding-block: var(--spacing-80);
}

.p-88 {
  padding: var(--spacing-88);
}

.p-x-88 {
  padding-inline: var(--spacing-88);
}

.p-y-88 {
  padding-block: var(--spacing-88);
}

.p-96 {
  padding: var(--spacing-96);
}

.p-x-96 {
  padding-inline: var(--spacing-96);
}

.p-y-96 {
  padding-block: var(--spacing-96);
}

.m-8 {
  margin: var(--spacing-8);
}

.m-x-8 {
  margin-inline: var(--spacing-8);
}

.m-y-8 {
  margin-block: var(--spacing-8);
}

.m-16 {
  margin: var(--spacing-16);
}

.m-x-16 {
  margin-inline: var(--spacing-16);
}

.m-y-16 {
  margin-block: var(--spacing-16);
}

.m-24 {
  margin: var(--spacing-24);
}

.m-x-24 {
  margin-inline: var(--spacing-24);
}

.m-y-24 {
  margin-block: var(--spacing-24);
}

.m-32 {
  margin: var(--spacing-32);
}

.m-x-32 {
  margin-inline: var(--spacing-32);
}

.m-y-32 {
  margin-block: var(--spacing-32);
}

.m-40 {
  margin: var(--spacing-40);
}

.m-x-40 {
  margin-inline: var(--spacing-40);
}

.m-y-40 {
  margin-block: var(--spacing-40);
}

.m-48 {
  margin: var(--spacing-48);
}

.m-x-48 {
  margin-inline: var(--spacing-48);
}

.m-y-48 {
  margin-block: var(--spacing-48);
}

.m-56 {
  margin: var(--spacing-56);
}

.m-x-56 {
  margin-inline: var(--spacing-56);
}

.m-y-56 {
  margin-block: var(--spacing-56);
}

.m-64 {
  margin: var(--spacing-64);
}

.m-x-64 {
  margin-inline: var(--spacing-64);
}

.m-y-64 {
  margin-block: var(--spacing-64);
}

.m-72 {
  margin: var(--spacing-72);
}

.m-x-72 {
  margin-inline: var(--spacing-72);
}

.m-y-72 {
  margin-block: var(--spacing-72);
}

.m-80 {
  margin: var(--spacing-80);
}

.m-x-80 {
  margin-inline: var(--spacing-80);
}

.m-y-80 {
  margin-block: var(--spacing-80);
}

.m-88 {
  margin: var(--spacing-88);
}

.m-x-88 {
  margin-inline: var(--spacing-88);
}

.m-y-88 {
  margin-block: var(--spacing-88);
}

.m-96 {
  margin: var(--spacing-96);
}

.m-x-96 {
  margin-inline: var(--spacing-96);
}

.m-y-96 {
  margin-block: var(--spacing-96);
}

/* Opacity setting */
[class*="opacity-"] picture::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-black);
  z-index: 1;
  width: 100%;
  height: 100%;
}

.opacity-0 picture::after, .opacity-0 video { opacity: 0; }
.opacity-10 picture::after, .opacity-10 video { opacity: 0.1; }
.opacity-20 picture::after, .opacity-20 video { opacity: 0.2; }
.opacity-30 picture::after, .opacity-30 video { opacity: 0.3; }
.opacity-40 picture::after, .opacity-40 video { opacity: 0.4; }
.opacity-50 picture::after, .opacity-50 video { opacity: 0.5; }
.opacity-60 picture::after, .opacity-60 video { opacity: 0.6; }
.opacity-70 picture::after, .opacity-70 video { opacity: 0.7; }
.opacity-80 picture::after, .opacity-80 video { opacity: 0.8; }
.opacity-90 picture::after, .opacity-90 video { opacity: 0.9; }
.opacity-100 picture::after, .opacity-1000 video { opacity: 1; }


@media (width >= 1200px) {
  /* Apply narrow margins to non-full-width sections when narrow-theme is active */
body.narrow-theme 
main > .section:not(.full-width) {
    padding-left: var(--spacing-287);
    padding-right: var(--spacing-287);
  }

body.narrow-theme
main > .section.full-width:has(.cards.slider) {
  padding-inline: var(--layout-padding-inline);
}

  h1, .h1 {
    margin-bottom: var(--spacing-40);
  }

  h2, .h2 {
    margin-bottom: var(--spacing-48);
  }

  h3, .h3 {
    margin-bottom: var(--spacing-40);
  }

  .button-container {
    margin-top: var(--spacing-56);
  }
}

.section.cards-container.spacer-container.page-list-container.blog-grid-container,
.section.blog-detail-heading-container.blog-detail-navigation-container.page-list-container.cards-container {
  padding-top: 0;
}

@media (width >=600px) and (width < 1200px) {
  main > .section:has(.categories.cards.icons) {
    padding-inline: var(--spacing-48);
  }

main>.section.full-width:has(.categories.cards.icons.slider) {
  padding-inline: 0;
}

}

button#talkdesk-chat-widget-trigger {
  min-width: unset;
}

@media (width < 1200px) {
  main > .section:has(.categories.cards.icons):has(.blog-grid) {
    padding-inline: var(--spacing-16);
  }
}

.page-list-container.blog-grid-container .spacer.horizontal-rule::before {
  background-color: var(--color-grey-300);
  height: var(--spacing-2);
}

/* adding styles to handle blogs */
main.blog > .section.remove-padding-block {
  padding-block: 0;
}

main.blog > .section.remove-padding-inline {
  padding-inline: 0;
}

main.blog > .section.remove-margins {
  margin: 0;
}

main.blog > .section.full-width {
  padding: 0 0 var(--spacing-74);
}
 
main.blog > .section.blog-detail-navigation-container {
  padding: 0;
}
 
main.blog .blog-detail-navigation-container .default-content-wrapper p:first-child {
  margin-top: 0;
}

@media (width >= 1200px) {
  main.blog > .section.full-width {
    padding: 0 0 var(--spacing-102);
  }
}

main.blog > .section.padding-blog,
main.blog .section:has(.default-content-wrapper) {
  padding-block: 0;
  margin: 0;
  padding-inline: var(--spacing-32);
}

main.blog .section:has(.default-content-wrapper):last-child {
  padding-bottom: var(--spacing-96);
}

@media (600px <= width < 1200px) {
  main.blog > .section.padding-blog,
  main.blog .section:has(.default-content-wrapper) {
    padding-inline: var(--spacing-64);
  }
}

@media (width >= 1200px) {
  main.blog > .section.padding-blog,
  main.blog .section:has(.default-content-wrapper) {
    padding-inline: var(--spacing-260);
  }
}

main.blog > .blog-detail-heading-wrapper {
  padding-top: var(--spacing-50);
  padding-bottom: var(--spacing-20);
}

main.blog > .default-content-wrapper {
  padding-block: var(--spacing-32);
}

main.blog .default-content-wrapper p {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

main.blog .default-content-wrapper p:not(:first-child) {
  margin-top: var(--spacing-16);
}

main.blog .default-content-wrapper p:not(:last-child) {
  margin-bottom: var(--spacing-16);
}

main.blog .default-content-wrapper h2 {
  margin-top: var(--spacing-48);
}

main.blog .default-content-wrapper ol,
main.blog .default-content-wrapper ul {
  padding-left: var(--spacing-16);
}