:root {
    /* Effects colors */
    --color-effects-shadow-1: #274d8f14;
    --color-effects-shadow-2: #0a0d1208;
    --color-effects-shadow-3: #0a0d120a;
    --color-effects-shadow-4: #0a0d120f;
    --color-effects-shadow-5: #0a0d121a;

    /* Grey scale */
    --color-grey-100: #F5F5F5;
    --color-grey-300: #CDCED2;
    --color-grey-500: #8F949E;
    --color-grey-600: #717680;
    --color-grey-700: #414651;
    --color-grey-900: #1B1D27;

    /* Icon filters */
    --icon-white: invert(1);
    --icon-black: brightness(0);

    /* Base colors */
    --color-white: #FFF;
    --color-black: #000;
    --color-transparent: transparent;
    --text-color-gradient: var(--color-white);
    --color-black-500: #8F949E;

    /* Tag colors */
    --color-tag-guides: #E7FAFF;
    --color-tag-sleep-solutions: #FFDFD2;
    --color-tag-peace-and-quiet: #FFE4FF;
    --color-tag-shopping-tips: #E7F6EC;
    --color-tag-mattress-care: #FEF0C7;

    /* PDP colors */
    --color-pdp-summary: #faf7f3;
    --color-pdp-border-summary: #fae100;

    /* Spacing */
    --spacing-1: 0.1rem;
    --spacing-1-5: 0.15rem;
    --spacing-2: 0.2rem;
    --spacing-3: 0.3rem;
    --spacing-4: 0.4rem;
    --spacing-5: 0.5rem;
    --spacing-6: 0.6rem;
    --spacing-6-7: 0.67rem;
    --spacing-7: 0.7rem;
    --spacing-8: 0.8rem;
    --spacing-9: 0.9rem;
    --spacing-10: 1rem;
    --spacing-11: 1.1rem;
    --spacing-12: 1.2rem;
    --spacing-13: 1.3rem;
    --spacing-14: 1.4rem;
    --spacing-15: 1.5rem;
    --spacing-16: 1.6rem;
    --spacing-17: 1.7rem;
    --spacing-18: 1.8rem;
    --spacing-19: 1.9rem;
    --spacing-20: 2rem;
    --spacing-22: 2.2rem;
    --spacing-21: 2.1rem;
    --spacing-23: 2.3rem;
    --spacing-24: 2.4rem;
    --spacing-25: 2.5rem;
    --spacing-26: 2.6rem;
    --spacing-27: 2.7rem;
    --spacing-28: 2.8rem;
    --spacing-29: 2.9rem;
    --spacing-30: 3rem;
    --spacing-31: 3.1rem;
    --spacing-32: 3.2rem;
    --spacing-33: 3.3rem;
    --spacing-34: 3.4rem;
    --spacing-35: 3.5rem;
    --spacing-36: 3.6rem;
    --spacing-39: 3.9rem;
    --spacing-40: 4rem;
    --spacing-41: 4.1rem;
    --spacing-42: 4.2rem;
    --spacing-44: 4.4rem;
    --spacing-45: 4.5rem;
    --spacing-47: 4.7rem;
    --spacing-48: 4.8rem;
    --spacing-50: 5rem;
    --spacing-51: 5rem;
    --spacing-56: 5.6rem;
    --spacing-60: 6rem;
    --spacing-62: 6.2rem;
    --spacing-63: 6.3rem;
    --spacing-64: 6.4rem;
    --spacing-65: 6.5rem;
    --spacing-66: 6.6rem;
    --spacing-68: 6.8rem;
    --spacing-70: 7rem;
    --spacing-72: 7.2rem;
    --spacing-74: 7.4rem;
    --spacing-75: 7.5rem;
    --spacing-76: 7.6rem;
    --spacing-78: 7.8rem;
    --spacing-80: 8rem;
    --spacing-82: 8.2rem;
    --spacing-85: 8.5rem;
    --spacing-84: 8.4rem;
    --spacing-87: 8.7rem;
    --spacing-88: 8.8rem;
    --spacing-92: 9.2rem;
    --spacing-96: 9.6rem;
    --spacing-97: 9.7rem;
    --spacing-98: 9.8rem;
    --spacing-100: 10rem;
    --spacing-101: 10.1rem;
    --spacing-102: 10.2rem;
    --spacing-104: 10.4rem;
    --spacing-106: 10.6rem;
    --spacing-108: 10.8rem;
    --spacing-110: 11rem;
    --spacing-112: 11.2rem;
    --spacing-113: 11.3rem;
    --spacing-117: 11.7rem;
    --spacing-118: 11.8rem;
    --spacing-120: 12rem;
    --spacing-122: 12.2rem;
    --spacing-125: 12.5rem;
    --spacing-127: 12.7rem;
    --spacing-136: 13.6rem;
    --spacing-140: 14rem;
    --spacing-143: 14.3rem;
    --spacing-160: 16rem;
    --spacing-175: 17.5rem;
    --spacing-184: 18.4rem;
    --spacing-190: 19.0rem;
    --spacing-200: 20rem;
    --spacing-204: 20.4rem;
    --spacing-287: 28.7rem;
    --spacing-257: 25.7rem;
    --spacing-260: 26rem;
    --spacing-37: 3.7rem;
    --spacing-58: 5.8rem;
    --spacing-38: 3.8rem;
    --spacing-46: 4.6rem;
    --spacing-111:11.1rem;
    --spacing-134: 13.4rem;
    --spacing-144: 14.4rem;
    --spacing-148: 14.8rem;
    --spacing-150: 15.0rem;
    --spacing-180: 18rem;
    --spacing-229: 22.9rem;
    --spacing-280: 28rem;
    --spacing-300: 30rem;
    --spacing-310: 31rem;
    --spacing-324: 32.4rem;
    --spacing-331: 33.1rem;
    --spacing-380: 38rem;
    --spacing-390: 39rem;
    --spacing-385: 38.5rem;
    --spacing-234: 23.4rem;
    --spacing-276: 27.6rem;
    --spacing-288: 28.8rem;
    --spacing-400: 40rem;
    --spacing-421: 42.1rem;
    --spacing-422: 42.2rem;
    --spacing-469: 46.9rem;
    --spacing-500: 50rem;
    --spacing-550: 55rem;
    --spacing-600: 60rem;
    --spacing-650: 65rem;
    --spacing-660: 66rem;
    --spacing-578: 57.8rem;
    --spacing-800: 80rem;
    --spacing-823: 82.3rem;
    --spacing-1090: 109rem;
    --spacing-128: 12.8rem;
    --spacing-124: 12.4rem;
    --negative-spacing-10: -1rem;
    --negative-spacing-12: -1.2rem;
    --negative-spacing-13: -1.3rem;
    --negative-spacing-36: -3.6rem;
    --negative-spacing-17: -1.7rem;
    --negative-spacing-4: -0.4rem;
    --negative-spacing-2: -0.2rem;
    --negative-spacing-1: -0.1rem;
    --utility-banner-height: 8.8rem;

    /* Image Dimensions */
    --placeholder-height: 30rem;
    --select-width: 6.4rem;

    /* Image Dimensions */
    --image-height-blog: 21.4rem;
    --icon-size-md: 2rem;

    /* Border Radius */
    --border-1: 0.1rem;
    --border-2: 0.2rem;
    --border-4: 0.4rem;
    --border-5: 0.5rem;
    --border-12: 1.2rem;
    --border-16: 1.6rem;

    /* Modal Size */
    --modal-width: 86.6rem;
    --modal-height: 44.8rem;

    /* Aspect-ratio */
    --aspect-ratio-hd: 16 / 9;
    --aspect-ratio-hd-vertical: 9 / 16;

    /* Font weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Heading Font sizes */
    --font-size-h1: 3.4rem;
    --font-size-h2: 3.2rem;
    --font-size-h3: 2.6rem;
    --font-size-h4-span: 2.4rem;
    --font-size-h4: 2.2rem;
    --font-size-h5: 2rem;
    --font-size-h6: 1.8rem;
    --font-size-3xl: 2.4rem;
    --font-size-2xl: 2.2rem;
    --font-size-xl: 2rem;
    --font-size-lg: 1.8rem;
    --font-size-md: 1.6rem;
    --font-size-sm: 1.4rem;
    --font-size-xs: 1.2rem;

    /* Line Heights */
    --line-height-h1: 4.0rem;
    --line-height-h2: 3.8rem;
    --line-height-h3: 3.2rem;
    --line-height-h4: 3rem;
    --line-height-h5: 2.6rem;
    --line-height-h6: 2.4rem;
    --line-height-2xl: 3rem;
    --line-height-xl: 2.8rem;
    --line-height-custom: 2.7rem;
    --line-height-lg: 2.6rem;
    --line-height-md: 2.4rem;
    --line-height-sm: 2.1rem;
    --line-height-xsm: 2rem;

    /* Layout */
    --nav-height: 6.2rem;
    --header-banner-height: var(--spacing-120);
    --breadcrumbs-height: 34px;
    
    /* Subtracting some 3px to overcome spacing between header and main. */
    --header-height: calc(var(--utility-banner-height) + var(--nav-height) + var(--header-banner-height) - var(--spacing-3));

    /* Tabs */
    --tab-label-width: 17rem;

    /* Timeline Carousel */
    --carousel-timeline-height-desktop: var(--spacing-385);
    --carousel-timeline-height-mobile: 60rem;
    --carousel-timeline-max-width: var(--spacing-1090);
    --carousel-timeline-nav-margin-top: 5.3rem;
    --carousel-timeline-mobile-font-size-h2: 2.2rem;
    --carousel-timeline-mobile-font-size-h6: 2rem;
    --carousel-timeline-mobile-padding-x: var(--spacing-18);
    --carousel-timeline-mobile-padding-y: var(--spacing-35);
    --carousel-timeline-border-color: var(--color-black-500);

    /* Layout */
   --layout-padding-inline: var(--spacing-20);
   --layout-max-width: 1600px;

    /* Focused state */
    --focused-base-outline: .2rem solid rgb(0 38 62 / 50%);
    --focused-base-outline-offset: 0.3rem;
    --focused-base-box-shadow: 0 0 0 .3rem var(--color-white), 0 0 .5rem .4rem rgb(0 38 62 / 30%)
}

@media (width >= 600px) and (width < 1200px) {
    :root {
        /* Layout */
       --layout-padding-inline: var(--spacing-48);
       --header-banner-height: var(--spacing-96);
       --utility-banner-height: var(--spacing-48);
    }
}

@media (width >=1200px) {
    :root {
        /* Heading Font Sizes - Desktop */
        --font-size-h1: 4.6rem;
        --font-size-h1-sm: 4.0rem;
        --font-size-h2: 3.8rem;
        --font-size-h2-sm: 3.6rem;
        --font-size-h3: 3.2rem;
        --font-size-h4-sm: 2.4rem;
        --font-size-h4: 2.6rem;
        --font-size-h5: 2.2rem;
        --font-size-h6: 2rem;

        /* Line Heights - Desktop */
        --line-height-h1: 5.2rem;
        --line-height-h1-sm: 4.8rem;
        --line-height-h2: 4.6rem;
        --line-height-h2-sm: 4.4rem;
        --line-height-h3: 4rem;
        --line-height-h4: 3.2rem;
        --line-height-h5: 3rem;
        --line-height-h6: 2.8rem;
        --line-height-h6-sm: 2.2rem;
        --header-banner-height: var(--spacing-48);

        /* Layout */
               --layout-padding-inline: var(--spacing-64);
               --nav-height: 7rem;
               --utility-banner-height: 5.1rem;
        --button-width: 17.7rem;
        --button-height: 4.8rem;
        --button-secondary-icon-color: var(--icon-black);
    
        /* Cart styles */
        --cart-quantity-background: #F9FAFB;
        --cart-summary-separator: #E5E5E5;
        --cart-item-box-shadow: 0 0 0 0 #E5E5E5 inset, 0 0 0 0 #E5E5E5 inset, 0 -1px 0 0 #E5E5E5 inset, 0 0 0 0 #E5E5E5 inset;
    }
}