/* Base Requirements */
/*
Strip Units

Returns an number without the units.

$number      - Any number with units
*/
/*
Build Media Query

Constructs a media query from it's various parts.

$media       - The media portion of the string: "screen"
$args        - The viewport and screen arguments: "(min-width: 320px)"
*/
/*
Spacing

Spacing are based on multipliers of 8px.

$SPACING_1X - 8px;
$SPACING_2X - 16px;
$SPACING_3X - 24px;
$SPACING_4X - 32px;
$SPACING_5X - 40px;
$SPACING_6X - 48px;
$SPACING_7X - 56px;
$SPACING_8X - 64px;
$SPACING_9X - 72px;
$SPACING_10X - 80px;
$SPACING_11X - 88px;

Style guide: Theme.Spacing
*/

:root {
  --spacing-1x: 8px;
  --spacing-2x: calc(var(--spacing-1x) * 2);
  --spacing-3x: calc(var(--spacing-1x) * 3);
  --spacing-4x: calc(var(--spacing-1x) * 4);
  --spacing-5x: calc(var(--spacing-1x) * 5);
  --spacing-6x: calc(var(--spacing-1x) * 6);
  --spacing-7x: calc(var(--spacing-1x) * 7);
  --spacing-8x: calc(var(--spacing-1x) * 8);
  --spacing-9x: calc(var(--spacing-1x) * 9);
  --spacing-10x: calc(var(--spacing-1x) * 10);
  --spacing-11x: calc(var(--spacing-1x) * 11);
  --spacing-12x: calc(var(--spacing-1x) * 12); }

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
main,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block; }

body {
  line-height: 1; }

ol,
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* ---------------------------------------------------------------------
 Font Scaling on Mobile Orientation Change Reset
------------------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

/* ---------------------------------------------------------------------
 HTML5 Element Reset
------------------------------------------------------------------------ */
audio,
canvas,
video,
progress,
picture {
  display: inline-block; }

template {
  display: none; }

/* ---------------------------------------------------------------------
 Form Reset Styles
------------------------------------------------------------------------ */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none; }

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical; }

::-moz-focus-inner {
  border: 0;
  padding: 0; }

/*
Colors

#ff8871 - $COLOR_PRIMARY_100
#fbb0a2 - $COLOR_PRIMARY_200
#fad9d2 - $COLOR_PRIMARY_300
#fff2ef - $COLOR_PRIMARY_400
#3cb1b1 - $COLOR_SECONDARY_100
#29B7CA - $COLOR_SECONDARY_200
#d8eeee - $COLOR_SECONDARY_300
#f6fbfb - $COLOR_SECONDARY_400
#6f6f6f - $COLOR_GRAY_6F
#000000 - $COLOR_BLACK
#ffffff - $COLOR_WHITE
*/
:root {
  --color-primary-100: #ff8871;
  --color-primary-101: #F9423A;
  --color-primary-102: #ff756e;
  --color-primary-200: #f5a893;
  --color-primary-300: #fad9d2;
  --color-primary-400: #fff2ef;
  --color-secondary-100: #3cb1b1;
  --color-secondary-200: #29B7CA;
  --color-secondary-300: #d8eeee;
  --color-secondary-400: #f6fbfb;
  --color-gray-fa: #fafafa;
  --color-gray-f3: #f3f3f3;
  --color-gray-ec: #ececec;
  --color-gray-d3: #d3d3d3;
  --color-gray-9b: #9b9b9b;
  --color-gray-97: #979797;
  --color-gray-6f: #6f6f6f;
  --color-gray-67: #676767;
  --color-gray-4a: #4a4a4a;
  --color-gray-1a: #1a1c1b;
  --color-gray-cc: #cccccc;
  --color-red-f0: #ff0d00;
  --color-red-f9: #f9423a;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-form-error: #bb0000;
  --color-secondary-200-dark: #2091a0; }

/*
Font variables
Font and typography settings.
$FONT_FAMILY_OPEN_SANS_REGULAR  - OpenSans-Regular font family .
$FONT_FAMILY_DEFAULT            - Default font family (OpenSans-Regular)
$FONT_WEIGHT_NORMAL             - Normal font weight
$FONT_WEIGHT_BOLD               - Bold font weight
$FONT_SIZE_DEFAULT              - Default font size (18px)
$LINE_HEIGHT_RESET              - Reset line-height (1)
$LINE_HEIGHT_DEFAULT            - Default line-height (1.2)
$FONT_COLOR_DEFAULT             - Default font color ($COLOR_GRAY_4A)
Style guide: Theme.Typography
*/
/*
Colors

#ff8871 - $COLOR_PRIMARY_100
#fbb0a2 - $COLOR_PRIMARY_200
#fad9d2 - $COLOR_PRIMARY_300
#fff2ef - $COLOR_PRIMARY_400
#3cb1b1 - $COLOR_SECONDARY_100
#29B7CA - $COLOR_SECONDARY_200
#d8eeee - $COLOR_SECONDARY_300
#f6fbfb - $COLOR_SECONDARY_400
#6f6f6f - $COLOR_GRAY_6F
#000000 - $COLOR_BLACK
#ffffff - $COLOR_WHITE
*/
:root {
  --color-primary-100: #ff8871;
  --color-primary-101: #F9423A;
  --color-primary-102: #ff756e;
  --color-primary-200: #f5a893;
  --color-primary-300: #fad9d2;
  --color-primary-400: #fff2ef;
  --color-secondary-100: #3cb1b1;
  --color-secondary-200: #29B7CA;
  --color-secondary-300: #d8eeee;
  --color-secondary-400: #f6fbfb;
  --color-gray-fa: #fafafa;
  --color-gray-f3: #f3f3f3;
  --color-gray-ec: #ececec;
  --color-gray-d3: #d3d3d3;
  --color-gray-9b: #9b9b9b;
  --color-gray-97: #979797;
  --color-gray-6f: #6f6f6f;
  --color-gray-67: #676767;
  --color-gray-4a: #4a4a4a;
  --color-gray-1a: #1a1c1b;
  --color-gray-cc: #cccccc;
  --color-red-f0: #ff0d00;
  --color-red-f9: #f9423a;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-form-error: #bb0000;
  --color-secondary-200-dark: #2091a0; }

@font-face {
  font-family: 'MuseoSans';
  font-display: swap;
  src: url("/assets/media/fonts/DQ-Fonts/MuseoSans-500.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'CervoNeue';
  font-display: swap;
  src: url("/assets/media/fonts/DQ-Fonts/CervoNeue-RegularNeue.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Typewriter FS';
  font-display: swap;
  src: url("/assets/media/fonts/TypewriterFS.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'KG Drops of Jupiter';
  font-display: swap;
  src: url("/assets/media/fonts/KGDropsofJupiter.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Hickory Jack';
  font-display: swap;
  src: url("/assets/media/fonts/HickoryJack.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Drina';
  font-display: swap;
  src: url("/assets/media/fonts/drina.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Avalon';
  font-display: swap;
  src: url("/assets/media/fonts/Avalon.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Foo';
  font-display: swap;
  src: url("/assets/media/fonts/foo.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "OpenSansRegular";
  font-display: swap;
  src: url("/assets/media/fonts/open-sans-v18-latin-600.woff2") format("woff2"), url("/assets/media/fonts/OpenSans-SemiBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: "OpenSansRegular";
  font-display: swap;
  src: url("/assets/media/fonts/open-sans-v18-latin-regular.woff2") format("woff2"), url("/assets/media/fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: "OpenSansRegular";
  font-display: swap;
  src: url("/assets/media/fonts/open-sans-v18-latin-italic.woff2") format("woff2"), url("/assets/media/fonts/OpenSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic; }

@font-face {
  font-family: "OpenSansRegular";
  src: url("/assets/media/fonts/open-sans-v18-latin-regular.woff2") format("woff2"), url("/assets/media/fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

:root {
  --font-family-open-sans-regular: 'OpenSansRegular';
  --font-family-default: OpenSansRegular, Arial, Helvetica, sans-serif;
  --font-weight-normal: 400;
  --font-weight-bold: 400;
  --font-size-default: 18px;
  --font-size-small: 13px;
  --font-size-medium: 24px;
  --font-size-large: 36px;
  --line-height-reset: 1;
  --line-height-default: 1.2;
  --font-color-default: #4a4a4a; }

/*
WRAPPER

Mixin for use in components without the need for inserting markup
*/
/*
Typography

Sets default values for font family, size, and line-height.
*/
/**
 * Visually Hidden
 *
 * Use to hide content in an accessible manner to provide instructions and content to a screenreader.
 */
/**
 * Visually Shown
 *
 * Use to set VISUALLY_HIDDEN properties back to default values.
 */
/**
 * Ellipsis
 *
 * Use to visually clip text. This will automatically add an ellipsis prior to the width of the text's container. Note: this only works for single-line text clipping.
 */
/*
Horizontal List

Creates an inline-block-based horizontal layout. Accepts an optional argument of a pixel value to override the default spacing of $SPACING_7X. Margin-top is specified just in case HLIST and VLIST are used between breakpoints.

$spacing - The amount of horizontal spacing between each item. Expects a pixel unit (e.g. `40px` or `$SPACING_3X`). Default is $SPACING_7X.
*/
/**
* Fixed grid system with equal column widths and gap widths per breakpoint.
* Also handles grid justification when container width doeesn't gracefully fit content.
* Note that only the $gap_base value is required in cases where the gap is consistent across breakpoints and only values up to the highest desired breakpoint are required.
*
* @param $column_width - Desired pixel width of column across all breakpoints.
* @param $justify - Where the grid is placed in relation to its container when there aren't enough columns to fill a row. See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items for options.
* @param $gap_base - Width of the gap between columns and rows at base breakpoint.
* @param $gap_small - Width of the gap between columns and rows at small breakpoint.
* @param $gap_medium - Width of the gap between columns and rows at medium breakpoint.
* @param $gap_large - Width of the gap between columns and rows at large breakpoint.
*/
/* ---------------------------------------------------------------------
 Elements Styles
------------------------------------------------------------------------ */
html,
body {
  box-sizing: border-box;
  height: 100%;
  scroll-behavior: smooth; }

body {
  font-family: "OpenSansRegular", Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #4a4a4a;
  background-color: #ffffff; }
  @supports (--css: customprops) {
    body {
      font-family: var(--font-family-default);
      font-size: var(--font-size-default); } }
  @supports (--css: customprops) {
    body {
      color: var(--font-color-default);
      background-color: var(--color-white); } }

@media (pointer: coarse) {
  body::before {
    content: 'course';
    display: none; } }

*,
*::before,
*::after {
  box-sizing: inherit; }

a {
  color: #ff8871;
  cursor: pointer; }
  a:link {
    text-decoration: none; }
  a:hover {
    text-decoration: underline !important; }
  @supports (--css: customprops) {
    a {
      color: var(--color-primary-100); } }

img {
  display: block;
  width: 100%; }

b, strong {
  font-weight: 700; }
  @supports (--css: customprops) {
    b, strong {
      font-weight: var(--font-weight-bold); } }

em, i {
  font-style: italic; }

input {
  font-family: "OpenSansRegular", Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #4a4a4a; }
  @supports (--css: customprops) {
    input {
      font-family: var(--font-family-default);
      font-size: var(--font-size-default); } }
  @supports (--css: customprops) {
    input {
      color: var(--font-color-default); } }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type=number] {
  -moz-appearance: textfield; }

p {
  font-size: 18px;
  color: #6f6f6f;
  line-height: 1.3; }
  @supports (--css: customprops) {
    p {
      font-size: var(--font-size-default);
      color: var(--color-gray-6f); } }

button {
  appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  overflow: visible;
  padding: 0;
  text-align: initial;
  text-transform: none;
  user-select: none; }

/*
 * V-CLOAK is used to hide dom elements until vue is loaded
 * !important is needed to ensure v-cloak style is applied
 * even when another display declaration is in place later
 * in the styles
 */
[v-cloak] {
  display: none !important; }

.rich-text {
  line-height: 1.3; }
  .rich-text b {
    font-weight: bold; }
  .rich-text ol, .rich-text ul {
    list-style: inside; }
  .rich-text h1 {
    font-size: 2em; }
  .rich-text h2 {
    font-size: 1.5em; }
  .rich-text h3 {
    font-size: 1.17em; }
  .rich-text h4 {
    font-size: 1em; }
  .rich-text h5 {
    font-size: 0.83em; }
  .rich-text h6 {
    font-size: 0.67em; }
  .rich-text img {
    display: inline-block; }

.isVisuallyHidden {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  position: absolute;
  clip: rect(0 0 0 0);
  overflow: hidden; }

@media print {
  .noPrint {
    display: none; } }

.d-none {
  display: none; }

.d-block {
  display: block; }

.vr--0 {
  margin-bottom: 0; }

.paddingT--0, .grid__column.paddingT--0 {
  padding-top: 0; }

.paddingL--1X {
  padding-left: 8px; }

.paddingL--2X {
  padding-left: 16px; }

.paddingL--3X {
  padding-left: 24px; }

.paddingL--4X {
  padding-left: 32px; }

.paddingL--5X {
  padding-left: 40px; }

.paddingL--6X {
  padding-left: 48px; }

.paddingL--7X {
  padding-left: 56px; }

.paddingR--1X {
  padding-right: 8px; }

.paddingR--2X {
  padding-right: 16px; }

.paddingR--3X {
  padding-right: 24px; }

.paddingR--4X {
  padding-right: 32px; }

.paddingR--5X {
  padding-right: 40px; }

.paddingR--6X {
  padding-right: 48px; }

.paddingR--7X {
  padding-right: 56px; }

.marginL--1X {
  margin-left: 8px; }

.marginL--2X {
  margin-left: 16px; }

.marginL--3X {
  margin-left: 24px; }

.marginL--4X {
  margin-left: 32px; }

.marginL--5X {
  margin-left: 40px; }

.marginL--6X {
  margin-left: 48px; }

.marginL--7X {
  margin-left: 56px; }

.marginR--1X {
  margin-right: 8px; }

.marginR--2X {
  margin-right: 16px; }

.marginR--3X {
  margin-right: 24px; }

.marginR--4X {
  margin-right: 32px; }

.marginR--5X {
  margin-right: 40px; }

.marginR--6X {
  margin-right: 48px; }

.marginR--7X {
  margin-right: 56px; }

.font-weight-bo {
  font-weight: bold; }

.font-weight-sm {
  font-weight: normal; }

/* Content */
.accordion__ingredients {
  line-height: 1.3; }

.accordion__ingredients__item {
  list-style: disc;
  margin-bottom: 8px;
  margin-left: 1em; }
  @supports (--css: customprops) {
    .accordion__ingredients__item {
      margin-bottom: var(--spacing-1x); } }

.accordion__list {
  border-top: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3; }
  @supports (--css: customprops) {
    .accordion__list {
      border-top: 1px solid var(--color-gray-d3);
      border-bottom: 1px solid var(--color-gray-d3); } }

.accordion__list__item {
  padding: 10.4px; }
  .accordion__list__item:not(:last-child) {
    border-bottom: 1px solid #d3d3d3; }
  @supports (--css: customprops) {
    .accordion__list__item {
      padding: calc(var(--spacing-1x) * 1.3); }
      .accordion__list__item:not(:last-child) {
        border-bottom: 1px solid var(--color-gray-d3); } }

.borderBanner {
  background-color: #d8eeee;
  border-radius: 4px;
  padding: 10px; }
  @supports (--css: customprops) {
    .borderBanner {
      background-color: var(--color-secondary-300); } }

.borderBanner__wrap {
  align-items: center;
  border-radius: 4px;
  border: 3px dashed #29B7CA;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 30px; }
  @media (min-width: 620px) {
    .borderBanner__wrap {
      flex-direction: row; } }
  @supports (--css: customprops) {
    .borderBanner__wrap {
      border: 3px dashed var(--color-secondary-200); } }

.borderBanner__wrap__hd {
  font-size: 24px; }
  .borderBanner__wrap__hd > span {
    text-decoration: underline; }
  @media (max-width: 619px) {
    .borderBanner__wrap__hd {
      margin-bottom: 20px; } }
  @media (min-width: 620px) {
    .borderBanner__wrap__hd {
      margin-right: 65px; } }

/* Breadcrumbs */
.breadcrumbs {
  color: #4a4a4a;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  margin-top: 16px;
  margin-bottom: 8px;
  margin-left: 24px; }

.breadcrumbs__item {
  white-space: nowrap; }
  .breadcrumbs__item:not(:last-child) {
    margin-right: 4px; }
    .breadcrumbs__item:not(:last-child)::after {
      color: #9b9b9b;
      content: ' \002F'; }
      @supports (--css: customprops) {
        .breadcrumbs__item:not(:last-child)::after {
          color: var(--color-gray-9b); } }

.breadcrumbs__item__link {
  color: #9b9b9b; }
  .breadcrumbs__item__link:focus-visible {
    outline: 1px solid #9b9b9b; }
  .breadcrumbs__item__link:focus, .breadcrumbs__item__link:hover {
    text-decoration: underline; }
  @supports (--css: customprops) {
    .breadcrumbs__item__link {
      color: var(--color-gray-9b); } }

.brick {
  background-position: center;
  background-size: cover;
  padding: 24px; }
  @supports (--css: customprops) {
    .brick {
      padding: var(--spacing-3x); } }

.callToAction__img {
  display: block;
  max-width: 100%; }

.callToAction__img:not(:last-child) {
  margin-bottom: 16px; }
  @supports (--css: customprops) {
    .callToAction__img:not(:last-child) {
      margin-bottom: var(--spacing-2x); } }

.callToAction__content {
  text-align: center; }

.card {
  display: block; }
  .card.card--category .categoryTitle-2c {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    @media (max-width: 360px) {
      .card.card--category .categoryTitle-2c {
        font-size: 13px; } }
    @media (min-width: 361px) and (max-width: 375px) {
      .card.card--category .categoryTitle-2c {
        font-size: 14px; } }

.card__image {
  background-color: #ffffff;
  background-position: center;
  background-size: cover;
  padding-bottom: 100%; }
  .card__image > img {
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    position: absolute;
    clip: rect(0 0 0 0);
    overflow: hidden; }
  @supports (--css: customprops) {
    .card__image {
      background-color: var(--color-white); } }

.card__image__svg {
  bottom: 10px;
  left: 10px;
  position: absolute;
  right: 10px;
  top: 10px; }

.card__caption {
  width: 100%;
  line-height: 1.2; }
  @supports (--css: customprops) {
    .card__caption {
      line-height: var(--line-height-default); } }

.card--thumbnail .card__caption {
  padding: 6px 0; }

.card--thumbnail .card__title {
  margin: 0 0 2px 0;
  font-size: 16px;
  font-weight: 700;
  color: #ff8871;
  transition: color 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  @supports (--css: customprops) {
    .card--thumbnail .card__title {
      font-weight: var(--font-weight-bold);
      color: var(--color-primary-100); } }

.card--thumbnail .card__subtitle {
  font-size: 16px;
  color: #6f6f6f; }
  @supports (--css: customprops) {
    .card--thumbnail .card__subtitle {
      color: var(--color-gray-6f); } }

.card--thumbnail:focus {
  outline: none; }

.card--thumbnail:hover, .card--thumbnail:focus {
  text-decoration: underline; }
  .card--thumbnail:hover .card__title, .card--thumbnail:focus .card__title {
    color: #9b9b9b; }
    @supports (--css: customprops) {
      .card--thumbnail:hover .card__title, .card--thumbnail:focus .card__title {
        color: var(--color-gray-9b); } }

.card--category {
  background-color: #ffffff; }
  @supports (--css: customprops) {
    .card--category {
      background-color: var(--color-white); } }
  .card--category .card__description {
    font-size: 16px;
    font-weight: 700;
    padding: 8px 0;
    text-align: center; }
    @supports (--css: customprops) {
      .card--category .card__description {
        font-weight: var(--font-weight-bold);
        padding: var(--spacing-1x) 0; } }
  .card--category .card__caption {
    background-color: #ff8871;
    padding: 6px 0; }
    @supports (--css: customprops) {
      .card--category .card__caption {
        background-color: var(--color-primary-100); } }
  .card--category .card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    text-align: center; }
    @supports (--css: customprops) {
      .card--category .card__title {
        font-weight: var(--font-weight-bold);
        color: var(--color-white); } }
  .card--category:hover .card__image, .card--category:focus .card__image {
    box-shadow: inset 0 4px 0 0 #ff8871, inset -4px 0 0 0 #ff8871, inset 4px 0 0 0 #ff8871; }
    @supports (--css: customprops) {
      .card--category:hover .card__image, .card--category:focus .card__image {
        box-shadow: inset 0 4px 0 0 var(--color-primary-100), inset -4px 0 0 0 var(--color-primary-100), inset 4px 0 0 0 var(--color-primary-100); } }
  .card--category:hover .card__description, .card--category:focus .card__description {
    box-shadow: inset -4px 0 0 0 #ff8871, inset 4px 0 0 0 #ff8871; }
    @supports (--css: customprops) {
      .card--category:hover .card__description, .card--category:focus .card__description {
        box-shadow: inset -4px 0 0 0 var(--color-primary-100), inset 4px 0 0 0 var(--color-primary-100); } }

.card--search {
  padding: 8px; }
  .card--search figure {
    display: flex;
    align-items: center; }
  .card--search .card__searchImage {
    margin-right: 16px;
    width: 75px; }
  .card--search .card__caption {
    flex: 1 1 auto; }
  .card--search .card__title {
    margin: 0 0 2px 0;
    font-size: 16px;
    font-weight: 700;
    color: #ff8871;
    transition: color 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53); }
    @supports (--css: customprops) {
      .card--search .card__title {
        font-weight: var(--font-weight-bold);
        color: var(--color-primary-100); } }
  .card--search .card__subtitle {
    font-size: 16px;
    color: #6f6f6f; }
    @supports (--css: customprops) {
      .card--search .card__subtitle {
        color: var(--color-gray-6f); } }
  .card--search:focus {
    outline: none; }
  .card--search:hover, .card--search:focus {
    text-decoration: underline; }
    .card--search:hover .card__title, .card--search:focus .card__title {
      color: #9b9b9b; }
      @supports (--css: customprops) {
        .card--search:hover .card__title, .card--search:focus .card__title {
          color: var(--color-gray-9b); } }

@media (min-width: 620px) {
  .columns--3 {
    column-count: 3; } }

@media (min-width: 620px) {
  .columns--4 {
    column-count: 4; } }

.createAccount {
  align-items: center;
  border-top: 1px solid #d3d3d3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 24px; }
  @media (min-width: 620px) {
    .createAccount {
      padding-top: 48px; } }
  @supports (--css: customprops) {
    .createAccount {
      border-top: 1px solid var(--color-gray-d3);
      padding-top: var(--spacing-3x); }
      @media (min-width: 620px) {
        .createAccount {
          padding-top: var(--spacing-6x); } } }

.createAccount__hd {
  margin-bottom: 16px; }
  @media (min-width: 620px) {
    .createAccount__hd {
      margin-bottom: 36px; } }

.createAccount__split {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  margin-bottom: 16px; }
  @media (min-width: 620px) {
    .createAccount__split {
      flex-direction: row;
      margin-bottom: 30px; } }

.createAccount__split__item {
  color: #9b9b9b;
  display: flex;
  align-items: center;
  fill: #9b9b9b;
  padding: 12px 0;
  flex: 1 1 50%; }
  @supports (--css: customprops) {
    .createAccount__split__item {
      color: var(--color-gray-9b);
      fill: var(--color-gray-9b); } }
  .createAccount__split__item:first-child {
    justify-content: flex-end; }
  @media (min-width: 620px) {
    .createAccount__split__item:not(:last-child) {
      border-right: 1px solid #d3d3d3; }
      @supports (--css: customprops) {
        .createAccount__split__item:not(:last-child) {
          border-right: 1px solid var(--color-gray-d3); } } }
  @media (min-width: 620px) {
    .createAccount__split__item {
      padding: 22px 36px; } }

.createAccount__split__item__icon {
  margin-right: 14px;
  width: 29px; }

.createAccount__split__item__label {
  font-style: 20px; }

.featured__title,
.featured__subtitle {
  margin-bottom: 16px; }

.featureTile {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-bottom: 68.37607%;
  position: relative;
  border-radius: 4px; }

.featureTile--right .featureTile__main {
  align-items: flex-end;
  padding: 0 28px 28px 0;
  right: 0;
  text-align: right; }

.featureTile--invert .featureTile__main {
  color: #ffffff; }
  @supports (--css: customprops) {
    .featureTile--invert .featureTile__main {
      color: var(--color-white); } }

.featureTile--narrow {
  padding-bottom: 34.18803%; }

.featureTile__main {
  bottom: 0;
  position: absolute;
  top: 0;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 28px 28px; }
  .featureTile__main--center {
    justify-content: center;
    padding: 0 0 0 28px; }

.featureTile__main__hd {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 12px; }
  @supports (--css: customprops) {
    .featureTile__main__hd {
      font-weight: var(--font-weight-bold); } }
  @media (min-width: 768px) {
    .featureTile__main__hd {
      font-size: 28px; } }
  @media (min-width: 960px) {
    .featureTile__main__hd {
      font-size: 36px; } }

.featureTile__main__bd {
  font-size: 14px;
  line-height: 1.14286;
  font-weight: 400;
  margin-bottom: 12px; }
  @supports (--css: customprops) {
    .featureTile__main__bd {
      font-weight: var(--font-weight-normal); } }
  @media (min-width: 768px) {
    .featureTile__main__bd {
      font-size: 18px;
      line-height: 1.11111; } }
  @media (min-width: 960px) {
    .featureTile__main__bd {
      font-size: 20px;
      line-height: 1.15; } }

.featureTile__main__cta > * {
  display: inline-block; }

.footer {
  border-top: 1px solid #d3d3d3;
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 36px; }
  @supports (--css: customprops) {
    .footer {
      border-top: 1px solid var(--color-gray-d3); } }
  .footer a {
    color: #ff756e; }

.footer_links {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1; }

.footer_legal, .footer_logo_icon {
  margin-top: 16px; }

.footer_legal {
  font-size: 13px;
  max-width: 500px;
  text-align: center;
  display: inline-block;
  color: #1a1c1b; }
  .footer_legal a {
    text-decoration: underline; }

.footer_logo_icon {
  width: 100%;
  max-width: 230px; }

.footer__brandLinks {
  flex: 1 1 auto; }
  @media (max-width: 619px) {
    .footer__brandLinks {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-bottom: 36px; } }
  @media (min-width: 620px) {
    .footer__brandLinks {
      padding-left: 78px; } }

.footer__brandLinks__logo {
  fill: #4a4a4a;
  margin-bottom: 36px;
  width: 100px; }
  @supports (--css: customprops) {
    .footer__brandLinks__logo {
      fill: var(--color-gray-4a); } }
  @media (min-width: 620px) {
    .footer__brandLinks__logo {
      width: 132px; } }

.footer__brandLinks__linkList__item {
  font-size: 12px;
  font-weight: 700;
  line-height: 2.33333;
  text-transform: uppercase; }
  .footer__brandLinks__linkList__item a {
    color: #4a4a4a; }
    .footer__brandLinks__linkList__item a:focus {
      outline: none;
      text-decoration: underline; }
  @supports (--css: customprops) {
    .footer__brandLinks__linkList__item {
      font-weight: var(--font-weight-bold); }
      .footer__brandLinks__linkList__item a {
        color: var(--color-gray-4a); } }

.footer__contact {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; }
  @media (max-width: 619px) {
    .footer__contact {
      align-items: center;
      text-align: center; } }
  @media (min-width: 620px) {
    .footer__contact {
      padding-right: 40px; } }

.footer__contact__social {
  margin-bottom: 36px; }
  @media (max-width: 619px) {
    .footer__contact__social {
      display: flex;
      flex-direction: column;
      align-items: center; } }
  @media (min-width: 620px) {
    .footer__contact__social {
      margin-bottom: 60px; } }

.footer__contact__info {
  color: #4a4a4a;
  font-size: 12px;
  font-weight: 700;
  line-height: 2; }
  @supports (--css: customprops) {
    .footer__contact__info {
      color: var(--color-gray-4a);
      font-weight: var(--font-weight-bold); } }

.footer__contact__info_text a.legal {
  color: #4a4a4a; }

.privacy-choices {
  display: flex;
  gap: 5px; }
  .privacy-choices img {
    width: 30px;
    padding-top: 2px; }

.footerSocial {
  display: flex;
  align-items: center; }

.footerSocial__item:not(:last-child) {
  margin-right: 26px; }

.footerSocial__item__link {
  fill: #000000;
  transition: fill 250ms cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  .footerSocial__item__link:focus {
    outline: none; }
  .footerSocial__item__link:focus, .footerSocial__item__link:hover {
    fill: #ff8871;
    transition: fill 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  @supports (--css: customprops) {
    .footerSocial__item__link {
      fill: var(--color-black); }
      .footerSocial__item__link:focus, .footerSocial__item__link:hover {
        fill: var(--color-primary-100); } }

.footerSocial__item__link__icon {
  display: block;
  width: 20px; }

.footerSocial__item__link__label {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  position: absolute;
  clip: rect(0 0 0 0);
  overflow: hidden; }

/*
Headers

HTML Headers

.header - Heading font size 36px.
.header--1 - `<h1>`.
.header--2 - `<h2>`.
.header--3 - `<h3>`.
.header--SECONDARY-200 - Can be mixed in to any level of header to change the color.
.header--centered - Can be mixed in to any level of header to change the alignment.
*/
.header {
  color: #4a4a4a;
  display: block;
  font-weight: 700; }
  @supports (--css: customprops) {
    .header {
      color: var(--font-color-default);
      font-weight: var(--font-weight-bold); } }

.header--1 {
  font-size: 36px; }

.header--2 {
  font-size: 24px;
  font-weight: 700; }
  @supports (--css: customprops) {
    .header--2 {
      font-weight: var(--font-weight-bold); } }

.header--2--20px {
  font-size: 20px; }

.header--3 {
  font-size: 18px;
  font-weight: 700;
  color: #6f6f6f; }
  @supports (--css: customprops) {
    .header--3 {
      font-weight: var(--font-weight-bold);
      color: var(--color-gray-6f); } }

.header--3--4A {
  color: #4a4a4a; }

.header--4 {
  font-size: 18px;
  font-weight: 400;
  color: #6f6f6f; }
  @supports (--css: customprops) {
    .header--4 {
      font-weight: var(--font-weight-normal);
      color: var(--color-gray-6f); } }

.header--SECONDARY-200 {
  color: #29B7CA !important; }
  @supports (--css: customprops) {
    .header--SECONDARY-200 {
      color: var(--color-secondary-200); } }

.header--centered {
  text-align: center; }

.icon {
  display: block;
  width: 100%;
  position: relative;
  vertical-align: middle;
  overflow: hidden; }

.icon::before {
  display: inherit;
  width: inherit;
  padding-bottom: 100%;
  content: ''; }

.icon-inner {
  width: inherit;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0; }

.custom-icon {
  object-fit: contain; }

.icon--arrowCurvedRight::before,
.icon--arrowCurvedLeft::before {
  padding-bottom: 55.52408%; }

.icon--caretLeft::before,
.icon--caretRight::before {
  padding-bottom: 173.75%; }

.icon--caretUp::before,
.icon--caretDown::before {
  padding-bottom: 57.55396%; }

.icon--bakery::before {
  padding-bottom: 77.41935%; }

.icon--logo::before,
.icon--logoColor::before {
  padding-bottom: 51.63154%; }

.icon--camera::before {
  padding-bottom: 78.89182%; }

.icon--crown::before {
  padding-bottom: 85.35354%; }

.icon--findACake::before {
  padding-bottom: 77.27273%; }

.icon--hamburger::before {
  padding-bottom: 66.66667%; }

.icon--heart::before {
  padding-bottom: 84.21053%; }

.icon--heartOutline::before {
  padding-bottom: 89.09091%; }

.icon--message::before {
  padding-bottom: 70.31963%; }

.icon--picture::before {
  padding-bottom: 87.5576%; }

.icon--profile::before {
  padding-bottom: 126.37363%; }

.icon--tick::before {
  padding-bottom: 70.1087%; }

.icon--triangleDown::before,
.icon--triangleUp::before {
  padding-bottom: 50.44248%; }

.icon--scaleHand::before {
  padding-bottom: 115.82915%; }

.icon--search::before {
  padding-bottom: 103.22581%; }

.icon--straightText::before {
  padding-bottom: 12.82051%; }

.icon--zoomIn::before
.icon--zoomOut::before {
  padding-bottom: 103.76344%; }

.icon--redo::before,
.icon--undo::before {
  padding-bottom: 100%; }

.icon--cameraUpload::before {
  padding-bottom: 100%; }

.icon--visible::before {
  padding-bottom: 100%; }

.icon--rotateCounterClockwise::before,
.icon--rotateClockwise::before {
  padding-bottom: 100%; }

.icon--eye::before {
  padding-bottom: 100%; }

.icon--replace::before {
  padding-bottom: 100%; }

.infoBanner {
  align-items: center;
  flex-direction: column;
  display: flex;
  justify-content: center; }

.infoBanner__hd {
  color: #ff8871;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px; }
  @supports (--css: customprops) {
    .infoBanner__hd {
      color: var(--color-primary-100);
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-bold);
      margin-bottom: var(--spacing-1x); } }

.infoBanner__bd {
  font-size: 14px; }

/*

2-up layout used for displaying a bakery/location

*/
.locationTile {
  align-items: center;
  display: flex;
  flex-direction: row; }

.locationTile__thumbnail {
  width: 30%; }
  .locationTile__thumbnail:first-child {
    margin-right: 16px; }
  .locationTile__thumbnail:last-child {
    margin-left: 16px; }
  @supports (--css: customprops) {
    .locationTile__thumbnail:first-child {
      margin-right: var(--spacing-2x); }
    .locationTile__thumbnail:last-child {
      margin-left: var(--spacing-2x); } }

.locationTile__label {
  font-size: 18px;
  flex-grow: 1; }
  @supports (--css: customprops) {
    .locationTile__label {
      font-size: var(--font-size-default); } }

.locationTile__label__name {
  color: #29B7CA;
  font-weight: 700;
  margin-bottom: 8px; }
  @supports (--css: customprops) {
    .locationTile__label__name {
      color: var(--color-secondary-200);
      font-weight: var(--font-weight-bold);
      margin-bottom: var(--spacing-1x); } }

.locationTile__label__info,
.locationTile__label__info > * {
  color: #6f6f6f;
  font-size: 13px; }
  @supports (--css: customprops) {
    .locationTile__label__info,
    .locationTile__label__info > * {
      color: var(--color-gray-6f);
      font-size: var(--font-size-small); } }

.link {
  color: #ff8871;
  cursor: pointer; }
  .link:link {
    text-decoration: none; }
  .link:hover {
    text-decoration: underline !important; }
  @supports (--css: customprops) {
    .link {
      color: var(--color-primary-100); } }
  .link--icon {
    align-items: center;
    display: flex; }

.link--icon {
  align-items: center;
  display: flex; }

.link__icon {
  fill: #ff8871;
  display: block;
  margin-right: 8px;
  width: 20px; }
  @supports (--css: customprops) {
    .link__icon {
      fill: var(--color-primary-100);
      margin-right: var(--spacing-1x); } }

.link--underline {
  text-decoration: underline; }

.media {
  display: flex;
  flex-direction: column; }
  @media (max-width: 619px) {
    .media > *:first-child {
      margin-bottom: 16px; }
      @supports (--css: customprops) {
        .media > *:first-child {
          margin-bottom: var(--spacing-2x); } } }
  @media (min-width: 620px) {
    .media {
      flex-direction: row; }
      .media > *:first-child {
        margin-right: 24px; }
        @supports (--css: customprops) {
          .media > *:first-child {
            margin-right: var(--spacing-3x); } } }

.media__img,
.media__content {
  flex: 1 1 100%; }
  @media (min-width: 620px) {
    .media__img,
    .media__content {
      flex: 1 1 50%; } }

/*
 * This is for a special message displayed when no search results are 
 * found for a particular set of query parameters. Initially, this 
 * content will be hard-coded, but a future requirement is that it be
 * editable content via CMS. We use descendant selectors and element 
 * selectors to make it easy to apply unique styles to css-provided
 * content.   
 */
.noSearchResults {
  text-align: center;
  margin-top: 24px;
  padding: 24px;
  color: #6f6f6f; }
  .noSearchResults h1 {
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 16px; }
  .noSearchResults h2 {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 24px; }
  .noSearchResults p {
    font-size: 18px;
    margin-bottom: 16px; }
  .noSearchResults img {
    width: 100%;
    max-width: 500px;
    margin: 0 auto; }

.notice {
  background-color: #d8eeee;
  border-radius: 4px;
  display: block;
  font-size: 16px;
  font-weight: 700;
  padding: 8px;
  width: 100%; }
  @supports (--css: customprops) {
    .notice {
      background-color: var(--color-secondary-300);
      font-weight: var(--font-weight-bold);
      padding: var(--spacing-1x); } }

.notice--icon {
  display: flex;
  align-items: center; }

.notice__icon {
  display: block;
  fill: #6f6f6f;
  margin-right: 8px;
  width: 40px; }
  @supports (--css: customprops) {
    .notice__icon {
      fill: var(--color-gray-6f);
      margin-right: var(--spacing-1x); } }

.sectionHeader {
  text-align: center; }

.sectionHeader__header {
  font-size: 24px; }

.sectionHeader__header__text {
  display: flex;
  justify-content: center; }
  .sectionHeader__header__text::before, .sectionHeader__header__text::after {
    background: linear-gradient(to bottom, transparent 50%, currentColor 1px, transparent calc(50% + 1px), transparent 100%);
    content: "";
    flex: 1 0 auto;
    opacity: 0.7; }
  .sectionHeader__header__text::before {
    margin-right: 8px; }
    @supports (--css: customprops) {
      .sectionHeader__header__text::before {
        margin-right: var(--spacing-1x); } }
  .sectionHeader__header__text::after {
    margin-left: 8px; }
    @supports (--css: customprops) {
      .sectionHeader__header__text::after {
        margin-left: var(--spacing-1x); } }

.sectionHeader__header,
.sectionHeader__subtitle,
.sectionHeader__body > *:not(:last-child) {
  margin-bottom: 8px; }
  @supports (--css: customprops) {
    .sectionHeader__header,
    .sectionHeader__subtitle,
    .sectionHeader__body > *:not(:last-child) {
      margin-bottom: var(--spacing-1x); } }

.sectionHeader__subtitle,
.sectionHeader__body {
  color: #979797;
  font-size: 13px; }

.sectionHeader__body p {
  font-size: 13px; }

.storeBanner {
  background-color: #fff2ef;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  width: 100%;
  margin: 0; }
  @media (min-width: 620px) {
    .storeBanner {
      padding: 32px 40px; } }
  @supports (--css: customprops) {
    .storeBanner {
      background-color: var(--color-primary-400); } }

.storeBanner__main {
  flex: 1 1 auto;
  margin-right: 6px; }
  @media (min-width: 620px) {
    .storeBanner__main {
      margin-right: 12px; } }

.storeBanner__hd {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 13px;
  text-transform: uppercase; }
  @media (min-width: 620px) {
    .storeBanner__hd {
      font-size: 24px; } }
  @supports (--css: customprops) {
    .storeBanner__hd {
      font-weight: var(--font-weight-bold); } }

.storeBanner__subHd {
  color: #9b9b9b;
  font-size: 14px; }
  @media (min-width: 620px) {
    .storeBanner__subHd {
      font-size: 20px; } }
  @supports (--css: customprops) {
    .storeBanner__subHd {
      color: var(--color-gray-9b); } }

.storeBanner__cta {
  align-items: center;
  display: flex;
  fill: #ff8871;
  justify-content: center; }
  @supports (--css: customprops) {
    .storeBanner__cta {
      fill: var(--color-primary-100); } }

.storeBanner__storeIcon {
  width: 34px;
  margin-right: 14px; }
  @media (min-width: 620px) {
    .storeBanner__storeIcon {
      margin-right: 27px;
      width: 57px; } }

.storeBanner__arrowIcon {
  width: 9px; }
  @media (min-width: 620px) {
    .storeBanner__arrowIcon {
      width: 14px; } }

/*
Text

.text--small - Body small
.text--occasionHeaders - occasion headers
.text--GRAY-6F - Can be 'mixed in' to any .text to change the color
.text--centered - Mix in to any .text to change the alignment
*/
.text {
  color: #6f6f6f;
  font-weight: 400;
  font-size: 18px; }
  @supports (--css: customprops) {
    .text {
      color: var(--color-gray-6f);
      font-weight: var(--font-weight-normal);
      font-size: var(--font-size-default); } }

.text--small {
  color: #4a4a4a;
  font-size: 13px;
  font-weight: 400; }
  @supports (--css: customprops) {
    .text--small {
      color: var(--font-color-default);
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-normal); } }

.text--small--12 {
  font-size: 12px; }

.text--small--14 {
  font-size: 14px; }

.text--small--16 {
  font-size: 16px; }

.text--medium--20 {
  font-size: 20px; }

.text--occasionHeaders {
  color: #ff8871;
  font-size: 14px;
  font-weight: 700; }
  @supports (--css: customprops) {
    .text--occasionHeaders {
      color: var(--color-primary-100);
      font-weight: var(--font-weight-bold); } }

.text--GRAY-6F {
  color: #6f6f6f; }
  @supports (--css: customprops) {
    .text--GRAY-6F {
      color: var(--color-gray-6f); } }

.text--GRAY-67 {
  color: #676767; }
  @supports (--css: customprops) {
    .text--GRAY-67 {
      color: var(--color-gray-67); } }

.text--centered {
  text-align: center; }

.text--main {
  font-size: 24px; }
  @supports (--css: customprops) {
    .text--main {
      font-size: var(--font-size-medium); } }

.text--bold {
  font-weight: 700; }
  @supports (--css: customprops) {
    .text--bold {
      font-weight: var(--font-weight-bold); } }

.videoWrapper {
  display: flex; }

.wysiwyg h1,
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
  color: #4a4a4a;
  display: block;
  font-weight: 700; }
  @supports (--css: customprops) {
    .wysiwyg h1,
    .wysiwyg h2,
    .wysiwyg h3,
    .wysiwyg h4,
    .wysiwyg h5,
    .wysiwyg h6 {
      color: var(--font-color-default);
      font-weight: var(--font-weight-bold); } }

.wysiwyg h1 {
  font-size: 36px; }

.wysiwyg h2 {
  font-size: 24px;
  font-weight: 700; }
  @supports (--css: customprops) {
    .wysiwyg h2 {
      font-weight: var(--font-weight-bold); } }

.wysiwyg h3 {
  font-size: 18px;
  font-weight: 700;
  color: #6f6f6f; }
  @supports (--css: customprops) {
    .wysiwyg h3 {
      font-weight: var(--font-weight-bold);
      color: var(--color-gray-6f); } }

.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
  font-size: 18px;
  font-weight: 400;
  color: #6f6f6f; }
  @supports (--css: customprops) {
    .wysiwyg h4,
    .wysiwyg h5,
    .wysiwyg h6 {
      font-weight: var(--font-weight-normal);
      color: var(--color-gray-6f); } }

.wysiwyg h6 {
  text-transform: uppercase; }

.wysiwyg > *:not(:last-child) {
  margin-bottom: 16px; }
  @supports (--css: customprops) {
    .wysiwyg > *:not(:last-child) {
      margin-bottom: var(--spacing-2x); } }

.wysiwyg p {
  font-size: 18px; }
  @supports (--css: customprops) {
    .wysiwyg p {
      font-size: var(--font-size-default); } }

.wysiwyg blockquote {
  color: #6f6f6f;
  font-style: italic;
  padding: 24px; }
  @supports (--css: customprops) {
    .wysiwyg blockquote {
      color: var(--color-gray-6f);
      padding: var(--spacing-3x); } }

.wysiwyg small {
  font-size: 13px; }
  @supports (--css: customprops) {
    .wysiwyg small {
      font-size: var(--font-size-small); } }

.wysiwyg ul,
.wysiwyg ol {
  line-height: 1.3; }

.wysiwyg li {
  margin-left: 24px; }
  @supports (--css: customprops) {
    .wysiwyg li {
      margin-left: var(--spacing-3x); } }

.wysiwyg ul li {
  list-style: disc; }

.wysiwyg ol li {
  list-style: decimal; }

.wysiwyg pre {
  background-color: #ececec;
  border-radius: 4px;
  color: #6f6f6f;
  font-family: monospace;
  padding: 16px; }
  @supports (--css: customprops) {
    .wysiwyg pre {
      background-color: var(--color-gray-ec);
      color: var(--color-gray-6f);
      padding: var(--spacing-2x); } }

.warning-modal-dialog {
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -25%);
  text-align: center;
  width: 499px;
  height: 200px;
  flex-direction: column;
  border-radius: 3px;
  border: 1px solid #EFEFEF;
  background: url("cakes_bg_gradient.png") repeat-x scroll 0 -80px #fff;
  z-index: 1003;
  display: none; }
  .warning-modal-dialog .warning-modal-content {
    display: flex;
    flex-direction: column; }
  .warning-modal-dialog h1 {
    width: 395px;
    margin: 38px auto 15px;
    font-size: 24px;
    color: #676767;
    font-weight: bold;
    margin-bottom: 15px; }
  .warning-modal-dialog a {
    margin: 1rem auto 30px;
    width: 129px;
    height: 31px;
    border: 1px solid #e1e1e1;
    background-color: #ffffff;
    background-size: cover;
    color: #676767;
    font-size: 16px;
    padding: 7px;
    font-weight: normal; }
  .warning-modal-dialog .warning-modal-dialog-button:hover {
    text-decoration: none !important;
    background-color: #e1e1e1; }
  .warning-modal-dialog .warning-modal-dialog-message {
    width: 402px;
    margin: auto; }
    .warning-modal-dialog .warning-modal-dialog-message p > #timer {
      color: #FF0000;
      font-weight: bold; }
  .warning-modal-dialog .warning-modal-close {
    width: 15px;
    height: 15px;
    top: 0.5rem;
    left: 29.5rem;
    position: absolute;
    cursor: pointer; }

.photo-cake-update-tickets textarea,
.photo-cake-update-tickets input[type="text"],
.photo-cake-update-tickets input[type="button"],
.photo-cake-update-tickets input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0; }

.photo-cake-update-tickets .formWrap p {
  line-height: 1.8; }

@media (max-width: 619px) {
  .photo-cake-update-tickets .contentContainer * {
    display: flex;
    flex-direction: column;
    align-items: center; }
  .photo-cake-update-tickets .contentContainer p {
    text-align: center; } }

.photo-cake-update-tickets .header--2 {
  font-size: 24px;
  font-weight: 700; }

.photo-cake-update-tickets .button__disabled {
  color: #676767;
  font-weight: 700;
  background-color: #E1E1E1 !important; }

.photo-cake-update-tickets .input-file {
  display: none; }

.photo-cake-update-tickets .input-file-upload {
  padding-left: 10px;
  font-size: 13px;
  color: #676767; }

.photo-cake-update-tickets .input-file-label {
  font-size: 16px;
  color: #676767;
  border-bottom: 1px solid #676767;
  font-weight: 700; }
  .photo-cake-update-tickets .input-file-label:hover {
    border-bottom: 1px solid #ffffff;
    cursor: pointer; }

.photo-cake-update-tickets .input-file-box {
  display: flex;
  flex-direction: unset;
  align-items: center; }

.photo-cake-update-tickets--thank-you .contentContainer * {
  display: flex;
  flex-direction: column;
  align-items: center; }

.photo-cake-update-tickets--thank-you .contentContainer p {
  text-align: center; }

/* Form elements */
/*
Buttons

Styling options for HTML button elements. All button variations inherit and override primary
styling applied by the `.button` class.

.button - Establishes a base button style w/ primary color.
.button--alt - Matches base button styles but uses secondary color instead of primary color.
.button--small - Small button.
.button--smallBlue - Small and Blue.
.button--blue - White with gray border.
*/
.button {
  font-family: "OpenSansRegular", Arial, Helvetica, sans-serif;
  font-size: 18px;
  background-color: #F9423A;
  border-radius: 2px;
  border: 0;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.2;
  padding: 10px 16px 9px 16px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap; }
  @supports (--css: customprops) {
    .button {
      font-family: var(--font-family-default);
      font-size: var(--font-size-default); } }
  .button .button__icon {
    fill: #ffffff; }
  .button:focus {
    outline: none; }
  .button:hover {
    background-color: #ffffff;
    color: #F9423A;
    box-shadow: 0 0 0 2px #F9423A;
    text-decoration: none; }
  .button:disabled, .button:disabled:hover {
    cursor: default;
    background-color: #d3d3d3;
    box-shadow: none;
    color: #ffffff; }
    .button:disabled .button__icon, .button:disabled:hover .button__icon {
      fill: #ffffff; }
  @media (min-width: 960px) {
    .button {
      font-size: 20px;
      padding: 13px 32px 11px 32px; } }
  @supports (--css: customprops) {
    .button {
      background-color: var(--color-primary-101);
      color: var(--color-white); }
      .button .button__icon {
        fill: var(--color-gray-6f); }
      .button:hover {
        background-color: var(--color-white);
        color: var(--color-primary-101);
        box-shadow: 0 0 0 2px var(--color-primary-101); }
      .button:disabled, .button:disabled:hover {
        background-color: var(--color-gray-d3);
        color: var(--color-white); }
        .button:disabled .button__icon, .button:disabled:hover .button__icon {
          fill: var(--color-white); } }

.button--override {
  font-family: "OpenSansRegular", Arial, Helvetica, sans-serif;
  font-size: 18px;
  background-color: #F9423A;
  border-radius: 2px;
  border: 0;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.2;
  padding: 10px 16px 9px 16px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap; }
  @supports (--css: customprops) {
    .button--override {
      font-family: var(--font-family-default);
      font-size: var(--font-size-default); } }
  .button--override .button__icon {
    fill: #ffffff; }
  .button--override:focus {
    outline: none; }
  .button--override:hover {
    background-color: #ffffff;
    color: #F9423A;
    box-shadow: 0 0 0 2px #F9423A;
    text-decoration: none; }
  .button--override:disabled, .button--override:disabled:hover {
    cursor: default;
    background-color: #d3d3d3;
    box-shadow: none;
    color: #ffffff; }
    .button--override:disabled .button__icon, .button--override:disabled:hover .button__icon {
      fill: #ffffff; }
  @media (min-width: 960px) {
    .button--override {
      font-size: 20px;
      padding: 13px 32px 11px 32px; } }
  @supports (--css: customprops) {
    .button--override {
      background-color: var(--color-primary-101);
      color: var(--color-white); }
      .button--override .button__icon {
        fill: var(--color-gray-6f); }
      .button--override:hover {
        background-color: var(--color-white);
        color: var(--color-primary-101);
        box-shadow: 0 0 0 2px var(--color-primary-101); }
      .button--override:disabled, .button--override:disabled:hover {
        background-color: var(--color-gray-d3);
        color: var(--color-white); }
        .button--override:disabled .button__icon, .button--override:disabled:hover .button__icon {
          fill: var(--color-white); } }

.button--small {
  min-width: 125px;
  font-size: 12px !important;
  letter-spacing: 0.8px;
  padding: 10px 5px;
  width: auto; }

.button--alt {
  background-color: #29B7CA; }
  .button--alt .button__icon {
    fill: #ffffff; }
  .button--alt:focus {
    color: #ffffff;
    box-shadow: 0 0 0 2px #29B7CA; }
    .button--alt:focus .button__icon {
      fill: #ffffff; }
  .button--alt:hover {
    color: #29B7CA;
    box-shadow: 0 0 0 2px #29B7CA; }
    .button--alt:hover .button__icon {
      fill: #29B7CA; }
  @supports (--css: customprops) {
    .button--alt {
      background-color: var(--color-secondary-200); }
      .button--alt .button__icon {
        fill: var(--color-white); }
      .button--alt:focus {
        color: var(--color-white);
        box-shadow: 0 0 0 2px var(--color-secondary-200); }
        .button--alt:focus .button__icon {
          fill: var(--color-white); }
      .button--alt:hover {
        color: var(--color-secondary-200);
        box-shadow: 0 0 0 2px var(--color-secondary-200); }
        .button--alt:hover .button__icon {
          fill: var(--color-secondary-200); } }

.button--alt--inverse {
  background-color: #ffffff;
  color: #29B7CA;
  border: solid 2px #29B7CA; }
  .button--alt--inverse .button__icon {
    fill: #29B7CA; }
  .button--alt--inverse:focus, .button--alt--inverse:hover {
    color: #ffffff;
    background-color: #29B7CA;
    box-shadow: 0 0 0 2px #29B7CA; }
    .button--alt--inverse:focus .button__icon, .button--alt--inverse:hover .button__icon {
      fill: #ffffff; }

.button--alt--small {
  background-color: #29B7CA;
  min-width: 125px;
  font-size: 12px !important;
  letter-spacing: 0.8px;
  padding: 10px 5px;
  width: auto; }
  .button--alt--small .button__icon {
    fill: #ffffff; }
  .button--alt--small:focus {
    color: #ffffff;
    box-shadow: 0 0 0 2px #29B7CA; }
    .button--alt--small:focus .button__icon {
      fill: #ffffff; }
  .button--alt--small:hover {
    color: #29B7CA;
    box-shadow: 0 0 0 2px #29B7CA; }
    .button--alt--small:hover .button__icon {
      fill: #29B7CA; }
  @supports (--css: customprops) {
    .button--alt--small {
      background-color: var(--color-secondary-200); }
      .button--alt--small .button__icon {
        fill: var(--color-white); }
      .button--alt--small:focus {
        color: var(--color-white);
        box-shadow: 0 0 0 2px var(--color-secondary-200); }
        .button--alt--small:focus .button__icon {
          fill: var(--color-white); }
      .button--alt--small:hover {
        color: var(--color-secondary-200);
        box-shadow: 0 0 0 2px var(--color-secondary-200); }
        .button--alt--small:hover .button__icon {
          fill: var(--color-secondary-200); } }

.button--icon {
  position: relative; }

.button--caps {
  text-transform: uppercase; }

.button--blue {
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #9b9b9b;
  color: #29B7CA;
  font-size: 16px;
  padding: 15px 32px 14px 32px;
  text-transform: none;
  width: auto; }
  .button--blue .button__icon {
    fill: #29B7CA; }
  .button--blue:focus, .button--blue:hover {
    background-color: #29B7CA;
    box-shadow: 0 0 0 1px #3cb1b1;
    color: #ffffff; }
    .button--blue:focus .button__icon, .button--blue:hover .button__icon {
      fill: #ffffff; }
  @supports (--css: customprops) {
    .button--blue {
      background-color: var(--color-white);
      box-shadow: 0 0 0 1px var(--color-gray-9b);
      color: var(--color-secondary-200); }
      .button--blue .button__icon {
        fill: var(--color-secondary-200); }
      .button--blue:focus, .button--blue:hover {
        background-color: var(--color-secondary-200);
        box-shadow: 0 0 0 1px var(--color-secondary-100);
        color: var(--color-white); }
        .button--blue:focus .button__icon, .button--blue:hover .button__icon {
          fill: var(--color-white); } }

.button--blue--inverse {
  background-color: #29B7CA;
  box-shadow: 0 0 0 1px #3cb1b1;
  color: #ffffff;
  font-size: 16px;
  padding: 15px 32px 14px 32px;
  text-transform: none;
  width: auto; }
  .button--blue--inverse .button__icon {
    fill: #ffffff; }
  .button--blue--inverse:focus, .button--blue--inverse:hover {
    background-color: #ffffff;
    box-shadow: 0 0 0 1px #29B7CA;
    color: #29B7CA; }
    .button--blue--inverse:focus .button__icon, .button--blue--inverse:hover .button__icon {
      fill: #ffffff; }
  @supports (--css: customprops) {
    .button--blue--inverse {
      background-color: var(--color-secondary-200);
      box-shadow: 0 0 0 1px var(--color-secondary-200);
      color: var(--color-secondary-200); }
      .button--blue--inverse .button__icon {
        fill: var(--color-white); }
      .button--blue--inverse:focus, .button--blue--inverse:hover {
        background-color: var(--color-white);
        box-shadow: 0 0 0 1px var(--color-secondary-200);
        color: var(--color-secondary-200); }
        .button--blue--inverse:focus .button__icon, .button--blue--inverse:hover .button__icon {
          fill: var(--color-secondary-200); } }

.button--autoWidth {
  width: auto; }

.button--fullWidth {
  width: 100%; }

.button--wrap {
  white-space: normal; }

.button--round {
  border-radius: 50%;
  padding: 6px;
  height: 40px;
  width: 40px; }
  .button--round .button__icon {
    position: relative;
    width: 100%;
    height: auto; }
  .button--round .button__label {
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    position: absolute;
    clip: rect(0 0 0 0);
    overflow: hidden; }

.button--isDisabled {
  background-color: #d3d3d3;
  box-shadow: none;
  color: #ffffff;
  cursor: default;
  pointer-events: none; }
  .button--isDisabled .button__icon {
    fill: #ffffff; }

.button--inverse {
  background-color: #ffffff;
  color: #ff8871;
  border: solid 2px #ff8871; }
  .button--inverse:hover {
    background-color: #ff8871;
    color: #ffffff;
    box-shadow: 0 0 0 2px #ffffff;
    text-decoration: none; }
    .button--inverse:hover .button__icon {
      fill: #ff8871; }

.button--downcase {
  text-transform: none; }

.button--fAQsWidth {
  width: 20rem;
  background-color: var(--color-secondary-100); }

.button--contatUs {
  padding-top: var(--spacing-3x); }

.button--lowercase {
  text-transform: none; }

.errorMessage {
  padding-top: 8px;
  color: #f9423a;
  font-size: 16px;
  line-height: 1.5; }
  .errorMessage[aria-hidden="true"] {
    overflow: hidden;
    height: 0;
    padding-top: 0; }
  @supports (--css: customprops) {
    .errorMessage {
      padding-top: var(--spacing-1x);
      color: var(--color-red-f9); }
      .errorMessage[aria-hidden="true"] {
        padding-top: 0; } }

.errorMessage--center {
  text-align: center;
  max-width: 550px;
  margin: auto;
  font-weight: bold; }

.favorite__input {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  position: absolute;
  clip: rect(0 0 0 0);
  overflow: hidden; }

.favorite__label {
  display: block;
  width: 20px;
  fill: transparent;
  cursor: pointer;
  transition: fill 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53); }

.favorite__input:hover + .favorite__label, .favorite__input:focus + .favorite__label {
  fill: #fad9d2;
  transition: fill 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.favorite__input:checked + .favorite__label {
  fill: #ff8871;
  transition: fill 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.favorite__input:hover + .favorite__label, .favorite__input:focus + .favorite__label {
  fill: var(--color-primary-300); }

.favorite__input:checked + .favorite__label {
  fill: var(--color-primary-100); }

.modalForm {
  max-width: 380px;
  margin: 0 auto; }

.modalForm__fieldset {
  padding-bottom: 24px; }
  .modalForm__fieldset:not(:first-child) {
    padding-top: 16px; }
  .modalForm__fieldset:not(:last-of-type) {
    border-bottom: 1px solid #d3d3d3; }

.modalForm__fieldset__item:not(:last-child) {
  margin-bottom: 16px; }

.modalForm__fieldset__item__label {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px; }
  .modalForm__fieldset__item__label--center {
    text-align: center; }
  .modalForm__fieldset__item__label--flat {
    margin-bottom: 0; }

.modalForm__fieldset__item__input--split {
  display: flex; }
  .modalForm__fieldset__item__input--split > * {
    flex: 1 1 50%; }
    .modalForm__fieldset__item__input--split > *:not(:last-child) {
      margin-right: 24px; }

.modalForm__fieldset__item__input--centered {
  display: flex;
  justify-content: center; }

.modalForm__fieldset__item__input--icons {
  display: flex;
  align-items: center; }
  .modalForm__fieldset__item__input--icons > *:first-child {
    flex: 1 1 auto; }
  .modalForm__fieldset__item__input--icons > *:not(:last-child) {
    margin-right: 8px; }

.modalForm__submit {
  display: flex;
  justify-content: center; }

.modalForm__fieldset + .modalForm__submit {
  margin-top: 16px; }
  @media (min-width: 768px) {
    .modalForm__fieldset + .modalForm__submit {
      padding: 24px; } }

.modalForm__fieldset__item__input__icon {
  fill: #29B7CA;
  width: 48px; }

.textInput {
  background-color: #ffffff;
  border: 1px solid #d3d3d3;
  border-radius: 2px;
  box-sizing: border-box;
  color: #4a4a4a;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.15;
  padding: 16px 16px 13px 16px;
  width: 100%; }
  .textInput:focus, .textInput:focus-within {
    box-shadow: 0 0 2px 1px currentColor;
    outline: none;
    transition: box-shadow 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .textInput ::placeholder {
    color: #cccccc; }
  .textInput.textInput--invalid {
    border-color: #bb0000;
    color: #bb0000; }
  @supports (--css: customprops) {
    .textInput {
      background-color: var(--color-white);
      border: 1px solid var(--color-gray-d3);
      color: var(--font-color-default);
      font-size: var(--font-size-default);
      padding: var(--spacing-2x) var(--spacing-2x) calc(var(--spacing-2x) - 3px) var(--spacing-2x); }
      .textInput ::placeholder {
        color: var(--color-gray-cc); }
      .textInput.textInput--invalid {
        color: var(--color-form-error);
        border-color: var(--color-form-error); } }

.textInput--compact {
  padding: 8px 8px 5px 8px; }
  @supports (--css: customprops) {
    .textInput--compact {
      padding: var(--spacing-1x) var(--spacing-1x) calc(var(--spacing-1x) - 3px) var(--spacing-1x); } }

.textInput--constrained {
  max-width: 215px; }

/* Layout */
.align {
  display: flex; }

.align--left {
  justify-content: flex-start; }

.align--center {
  justify-content: center; }

.align--right {
  justify-content: flex-end; }

/* ----------------------------------------------------------------------
 blocks - blocks object
---------------------------------------------------------------------- */
.blocks {
  display: flex;
  flex-wrap: wrap;
  margin-left: -24px;
  margin-top: -24px; }
  .blocks > * {
    box-sizing: border-box;
    padding-left: 24px;
    padding-top: 24px;
    position: relative; }
  @supports (--css: customprops) {
    .blocks {
      margin-left: calc(var(--spacing-3x) * -1);
      margin-top: calc(var(--spacing-3x) * -1); }
      .blocks > * {
        padding-left: var(--spacing-3x);
        padding-top: var(--spacing-3x); } }

.blocks--1up > * {
  width: 100%; }

.blocks--2up > * {
  width: 50%; }

.blocks--3up > * {
  width: 33.33333%; }

.blocks--4up > * {
  width: 25%; }

.blocks--5up > * {
  width: 20%; }

.blocks--6up > * {
  width: 16.66667%; }

@media (max-width: 620px) {
  .handleMobile {
    flex-direction: column; }
    .handleMobile .width-on-mobile {
      width: 100%; } }

.cardList {
  background-color: #fff2ef;
  padding: 24px; }
  @supports (--css: customprops) {
    .cardList {
      background-color: var(--color-primary-400);
      padding: var(--spacing-3x); } }

.cardList--empty {
  align-items: center;
  flex-direction: column;
  display: flex;
  justify-content: center;
  margin-top: 32px; }
  @supports (--css: customprops) {
    .cardList--empty {
      margin-top: var(--spacing-4x); } }

.cardList--empty__hd {
  color: #4a4a4a;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 16px; }
  @supports (--css: customprops) {
    .cardList--empty__hd {
      color: var(--color-gray-4a);
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-bold);
      margin-bottom: var(--spacing-2x); } }

.cardList--empty__bd {
  font-size: 18px; }

.cardList__hd {
  margin-bottom: 24px; }
  @supports (--css: customprops) {
    .cardList__hd {
      margin-bottom: var(--spacing-3x); } }

.cardList__hd--split {
  display: flex;
  align-items: center;
  justify-content: space-between; }

.cardList__hd__link {
  color: #4a4a4a; }
  @supports (--css: customprops) {
    .cardList__hd__link {
      color: var(--font-color-default); } }

.cardList__subhd {
  margin-bottom: 16px; }
  @supports (--css: customprops) {
    .cardList__subhd {
      margin-bottom: var(--spacing-2x); } }

.cardList__list {
  display: flex;
  flex-wrap: wrap;
  margin-left: -24px;
  margin-top: -24px; }
  .cardList__list > * {
    box-sizing: border-box;
    padding-left: 24px;
    padding-top: 24px;
    position: relative; }
  @supports (--css: customprops) {
    .cardList__list {
      margin-left: calc(var(--spacing-3x) * -1);
      margin-top: calc(var(--spacing-3x) * -1); }
      .cardList__list > * {
        padding-left: var(--spacing-3x);
        padding-top: var(--spacing-3x); } }
  .cardList__list > * {
    width: 50%; }
  @media (min-width: 620px) {
    .cardList__list > * {
      width: 25%; } }
  .cardList__list.cardList__list--1up > * {
    width: 100%; }
  .cardList__list.cardList__list--2up > * {
    width: 50%; }
  .cardList__list.cardList__list--3up > * {
    width: 33.33333%; }
  .cardList__list.cardList__list--4up > * {
    width: 25%; }
  @media (max-width: 619px) {
    .cardList__list.cardList__list--4up > * {
      width: 50%; } }
  @media (min-width: 620px) {
    .cardList__list.cardList__list--narrow > * {
      width: 50%; } }
  @media (min-width: 960px) {
    .cardList__list.cardList__list--narrow > * {
      width: 33.33333%; } }

.cardList__hd__cta {
  display: none;
  margin-left: 16px; }
  @media (max-width: 619px) {
    .cardList__hd__cta {
      display: block; } }
  @supports (--css: customprops) {
    .cardList__hd__cta {
      margin-left: var(--spacing-2x); } }

.cardList__ft {
  display: flex;
  justify-content: center;
  margin-top: 48px; }
  @supports (--css: customprops) {
    .cardList__ft {
      margin-top: var(--spacing-6x); } }

.cardList__list__addOn {
  display: flex;
  flex-direction: column; }

.expandList {
  border-top: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3; }
  @supports (--css: customprops) {
    .expandList {
      border-top: 1px solid var(--color-gray-d3);
      border-bottom: 1px solid var(--color-gray-d3); } }

.expandList__item {
  padding: 10.4px; }
  .expandList__item:not(:last-child) {
    border-bottom: 1px solid #d3d3d3; }
  @supports (--css: customprops) {
    .expandList__item {
      padding: calc(var(--spacing-1x) * 1.3); }
      .expandList__item:not(:last-child) {
        border-bottom: 1px solid var(--color-gray-d3); } }

/*
Grid

The grid is a 12-column system for horizontal layout of *fluid-width* content. For fixed-width content, use the `$FIXED_WIDTH_GRID()` SASS mixin to create a grid custom to the content you are laying out.

The css class names that control the grid column configuration are based on the following examples:
* *.grid__column* - Each column gets this as a base class.
* *.grid__column--`n`of12* - The `n` represents the number of grid units the column is intended to take up. Must be used in conjunction with other extenstion classes to total `12` column divs in one row.
*/
.grid {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  margin-left: -24px;
  margin-top: -24px; }
  @supports (--css: customprops) {
    .grid {
      margin-left: calc(var(--spacing-3x) * -1);
      margin-top: calc(var(--spacing-3x) * -1); } }

.grid + .grid {
  padding-top: 24px; }
  @supports (--css: customprops) {
    .grid + .grid {
      padding-top: var(--spacing-3x); } }

.grid__column {
  box-sizing: border-box;
  flex: 0 0 auto;
  padding-left: 24px;
  padding-top: 24px;
  width: 100%; }
  @supports (--css: customprops) {
    .grid__column {
      padding-left: var(--spacing-3x);
      padding-top: var(--spacing-3x); } }

.grid__column--1of1 {
  width: 100%; }

.grid__column--1of2 {
  width: 50%; }

.grid__column--2of2 {
  width: 100%; }

.grid__column--1of3 {
  width: 33.33333%; }

.grid__column--2of3 {
  width: 66.66667%; }

.grid__column--3of3 {
  width: 100%; }

.grid__column--1of4 {
  width: 25%; }

.grid__column--2of4 {
  width: 50%; }

.grid__column--3of4 {
  width: 75%; }

.grid__column--4of4 {
  width: 100%; }

.grid__column--1of5 {
  width: 20%; }

.grid__column--2of5 {
  width: 40%; }

.grid__column--3of5 {
  width: 60%; }

.grid__column--4of5 {
  width: 80%; }

.grid__column--5of5 {
  width: 100%; }

.grid__column--1of6 {
  width: 16.66667%; }

.grid__column--2of6 {
  width: 33.33333%; }

.grid__column--3of6 {
  width: 50%; }

.grid__column--4of6 {
  width: 66.66667%; }

.grid__column--5of6 {
  width: 83.33333%; }

.grid__column--6of6 {
  width: 100%; }

.grid__column--1of7 {
  width: 14.28571%; }

.grid__column--2of7 {
  width: 28.57143%; }

.grid__column--3of7 {
  width: 42.85714%; }

.grid__column--4of7 {
  width: 57.14286%; }

.grid__column--5of7 {
  width: 71.42857%; }

.grid__column--6of7 {
  width: 85.71429%; }

.grid__column--7of7 {
  width: 100%; }

.grid__column--1of8 {
  width: 12.5%; }

.grid__column--2of8 {
  width: 25%; }

.grid__column--3of8 {
  width: 37.5%; }

.grid__column--4of8 {
  width: 50%; }

.grid__column--5of8 {
  width: 62.5%; }

.grid__column--6of8 {
  width: 75%; }

.grid__column--7of8 {
  width: 87.5%; }

.grid__column--8of8 {
  width: 100%; }

.grid__column--1of9 {
  width: 11.11111%; }

.grid__column--2of9 {
  width: 22.22222%; }

.grid__column--3of9 {
  width: 33.33333%; }

.grid__column--4of9 {
  width: 44.44444%; }

.grid__column--5of9 {
  width: 55.55556%; }

.grid__column--6of9 {
  width: 66.66667%; }

.grid__column--7of9 {
  width: 77.77778%; }

.grid__column--8of9 {
  width: 88.88889%; }

.grid__column--9of9 {
  width: 100%; }

.grid__column--1of10 {
  width: 10%; }

.grid__column--2of10 {
  width: 20%; }

.grid__column--3of10 {
  width: 30%; }

.grid__column--4of10 {
  width: 40%; }

.grid__column--5of10 {
  width: 50%; }

.grid__column--6of10 {
  width: 60%; }

.grid__column--7of10 {
  width: 70%; }

.grid__column--8of10 {
  width: 80%; }

.grid__column--9of10 {
  width: 90%; }

.grid__column--10of10 {
  width: 100%; }

.grid__column--1of11 {
  width: 9.09091%; }

.grid__column--2of11 {
  width: 18.18182%; }

.grid__column--3of11 {
  width: 27.27273%; }

.grid__column--4of11 {
  width: 36.36364%; }

.grid__column--5of11 {
  width: 45.45455%; }

.grid__column--6of11 {
  width: 54.54545%; }

.grid__column--7of11 {
  width: 63.63636%; }

.grid__column--8of11 {
  width: 72.72727%; }

.grid__column--9of11 {
  width: 81.81818%; }

.grid__column--10of11 {
  width: 90.90909%; }

.grid__column--11of11 {
  width: 100%; }

.grid__column--1of12 {
  width: 8.33333%; }

.grid__column--2of12 {
  width: 16.66667%; }

.grid__column--3of12 {
  width: 25%; }

.grid__column--4of12 {
  width: 33.33333%; }

.grid__column--5of12 {
  width: 41.66667%; }

.grid__column--6of12 {
  width: 50%; }

.grid__column--7of12 {
  width: 58.33333%; }

.grid__column--8of12 {
  width: 66.66667%; }

.grid__column--9of12 {
  width: 75%; }

.grid__column--10of12 {
  width: 83.33333%; }

.grid__column--11of12 {
  width: 91.66667%; }

.grid__column--12of12 {
  width: 100%; }

@media (min-width: 480px) {
  .grid__column--1of12XS {
    width: 8.33333%; }
  .grid__column--2of12XS {
    width: 16.66667%; }
  .grid__column--3of12XS {
    width: 25%; }
  .grid__column--4of12XS {
    width: 33.33333%; }
  .grid__column--5of12XS {
    width: 41.66667%; }
  .grid__column--6of12XS {
    width: 50%; }
  .grid__column--7of12XS {
    width: 58.33333%; }
  .grid__column--8of12XS {
    width: 66.66667%; }
  .grid__column--9of12XS {
    width: 75%; }
  .grid__column--10of12XS {
    width: 83.33333%; }
  .grid__column--11of12XS {
    width: 91.66667%; }
  .grid__column--12of12XS {
    width: 100%; } }

@media (min-width: 620px) {
  .grid__column--1of12SM {
    width: 8.33333%; }
  .grid__column--2of12SM {
    width: 16.66667%; }
  .grid__column--3of12SM {
    width: 25%; }
  .grid__column--4of12SM {
    width: 33.33333%; }
  .grid__column--5of12SM {
    width: 41.66667%; }
  .grid__column--6of12SM {
    width: 50%; }
  .grid__column--7of12SM {
    width: 58.33333%; }
  .grid__column--8of12SM {
    width: 66.66667%; }
  .grid__column--9of12SM {
    width: 75%; }
  .grid__column--10of12SM {
    width: 83.33333%; }
  .grid__column--11of12SM {
    width: 91.66667%; }
  .grid__column--12of12SM {
    width: 100%; } }

@media (min-width: 768px) {
  .grid__column--1of12MD {
    width: 8.33333%; }
  .grid__column--2of12MD {
    width: 16.66667%; }
  .grid__column--3of12MD {
    width: 25%; }
  .grid__column--4of12MD {
    width: 33.33333%; }
  .grid__column--5of12MD {
    width: 41.66667%; }
  .grid__column--6of12MD {
    width: 50%; }
  .grid__column--7of12MD {
    width: 58.33333%; }
  .grid__column--8of12MD {
    width: 66.66667%; }
  .grid__column--9of12MD {
    width: 75%; }
  .grid__column--10of12MD {
    width: 83.33333%; }
  .grid__column--11of12MD {
    width: 91.66667%; }
  .grid__column--12of12MD {
    width: 100%; } }

@media (min-width: 960px) {
  .grid__column--1of12LG {
    width: 8.33333%; }
  .grid__column--2of12LG {
    width: 16.66667%; }
  .grid__column--3of12LG {
    width: 25%; }
  .grid__column--4of12LG {
    width: 33.33333%; }
  .grid__column--5of12LG {
    width: 41.66667%; }
  .grid__column--6of12LG {
    width: 50%; }
  .grid__column--7of12LG {
    width: 58.33333%; }
  .grid__column--8of12LG {
    width: 66.66667%; }
  .grid__column--9of12LG {
    width: 75%; }
  .grid__column--10of12LG {
    width: 83.33333%; }
  .grid__column--11of12LG {
    width: 91.66667%; }
  .grid__column--12of12LG {
    width: 100%; } }

.grid--fillColumnHeight > .grid__column {
  display: flex; }
  .grid--fillColumnHeight > .grid__column > * {
    width: 100%; }

.grid--noGutter {
  margin-left: 0;
  margin-top: 0; }
  .grid--noGutter .grid__column {
    padding-left: 0;
    padding-top: 0; }

.grid--noGutter + .grid--noGutter {
  padding-top: 0; }

@media (max-width: 767px) {
  .grid.grid--cms > .grid__column {
    width: 100%; } }

/*
Horizontal List

Inline-block-based horizontal layout system that accepts spacing variables to control space between elements. Default spacing without any modifiers classes added is equal to `$SPACING_1X`. Any markup may be used but the typical use cases use `<ul>` or `<ol>` for proper semtantics. Makes use of the `HLIST()` mixin and typically it's best to include that into the desired component rather than using this one in order to avoid bloated markup.

.hList--2X - Spacing equivalent to `$SPACING_2X`.
.hList--3X - Spacing equivalent to `$SPACING_3X`.
.hList--4X - Spacing equivalent to `$SPACING_4X`.
.hList--5X - Spacing equivalent to `$SPACING_5X`.
.hList--6X - Spacing equivalent to `$SPACING_6X`.
.hList--7X - Spacing equivalent to `$SPACING_7X`.
.hList--8X - Spacing equivalent to `$SPACING_8X`.
*/
.hList {
  display: flex; }

.hList--1X > *:not(:last-child) {
  margin-right: 8px; }
  @supports (--css: customprops) {
    .hList--1X > *:not(:last-child) {
      margin-right: calc(var(--spacing-1x) * 1); } }

.hList--2X > *:not(:last-child) {
  margin-right: 16px; }
  @supports (--css: customprops) {
    .hList--2X > *:not(:last-child) {
      margin-right: calc(var(--spacing-1x) * 2); } }

.hList--3X > *:not(:last-child) {
  margin-right: 24px; }
  @supports (--css: customprops) {
    .hList--3X > *:not(:last-child) {
      margin-right: calc(var(--spacing-1x) * 3); } }

.hList--4X > *:not(:last-child) {
  margin-right: 32px; }
  @supports (--css: customprops) {
    .hList--4X > *:not(:last-child) {
      margin-right: calc(var(--spacing-1x) * 4); } }

.hList--5X > *:not(:last-child) {
  margin-right: 40px; }
  @supports (--css: customprops) {
    .hList--5X > *:not(:last-child) {
      margin-right: calc(var(--spacing-1x) * 5); } }

.hList--6X > *:not(:last-child) {
  margin-right: 48px; }
  @supports (--css: customprops) {
    .hList--6X > *:not(:last-child) {
      margin-right: calc(var(--spacing-1x) * 6); } }

.hList--7X > *:not(:last-child) {
  margin-right: 56px; }
  @supports (--css: customprops) {
    .hList--7X > *:not(:last-child) {
      margin-right: calc(var(--spacing-1x) * 7); } }

.hList--8X > *:not(:last-child) {
  margin-right: 64px; }
  @supports (--css: customprops) {
    .hList--8X > *:not(:last-child) {
      margin-right: calc(var(--spacing-1x) * 8); } }

/*
Hr

.hr - add a gray horizontal rule. Uses same spacing modifiers as .vr

*/
.hr {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid #d3d3d3;
  display: block;
  height: 0;
  width: 100%;
  padding-top: 8px;
  margin-bottom: 8px; }
  @supports (--css: customprops) {
    .hr {
      border-bottom: 2px solid var(--color-gray-d3);
      padding-top: var(--spacing-1x);
      margin-bottom: var(--spacing-1x); } }

.hr--1X {
  margin-bottom: 8px;
  padding-top: 8px; }
  @supports (--css: customprops) {
    .hr--1X {
      margin-bottom: calc(var(--spacing-1x) * 1);
      padding-top: calc(var(--spacing-1x) * 1); } }

.hr--2X {
  margin-bottom: 16px;
  padding-top: 16px; }
  @supports (--css: customprops) {
    .hr--2X {
      margin-bottom: calc(var(--spacing-1x) * 2);
      padding-top: calc(var(--spacing-1x) * 2); } }

.hr--3X {
  margin-bottom: 24px;
  padding-top: 24px; }
  @supports (--css: customprops) {
    .hr--3X {
      margin-bottom: calc(var(--spacing-1x) * 3);
      padding-top: calc(var(--spacing-1x) * 3); } }

.hr--4X {
  margin-bottom: 32px;
  padding-top: 32px; }
  @supports (--css: customprops) {
    .hr--4X {
      margin-bottom: calc(var(--spacing-1x) * 4);
      padding-top: calc(var(--spacing-1x) * 4); } }

.hr--5X {
  margin-bottom: 40px;
  padding-top: 40px; }
  @supports (--css: customprops) {
    .hr--5X {
      margin-bottom: calc(var(--spacing-1x) * 5);
      padding-top: calc(var(--spacing-1x) * 5); } }

.hr--6X {
  margin-bottom: 48px;
  padding-top: 48px; }
  @supports (--css: customprops) {
    .hr--6X {
      margin-bottom: calc(var(--spacing-1x) * 6);
      padding-top: calc(var(--spacing-1x) * 6); } }

.hr--7X {
  margin-bottom: 56px;
  padding-top: 56px; }
  @supports (--css: customprops) {
    .hr--7X {
      margin-bottom: calc(var(--spacing-1x) * 7);
      padding-top: calc(var(--spacing-1x) * 7); } }

.infoTile {
  display: flex; }

.infoTile__img {
  flex: 0 1 200px;
  margin-right: 16px; }

.infoTile__content {
  display: flex;
  flex-direction: column; }

.infoTile__hd {
  margin-bottom: 8px; }
  @supports (--css: customprops) {
    .infoTile__hd {
      margin-bottom: var(--spacing-1x); } }

.infoTile__subHd {
  align-items: center;
  display: flex;
  font-size: 16px;
  margin-bottom: 8px; }
  @supports (--css: customprops) {
    .infoTile__subHd {
      margin-bottom: var(--spacing-1x); } }

.infoTile__bd {
  color: #4a4a4a;
  font-size: 13px; }
  @supports (--css: customprops) {
    .infoTile__bd {
      color: var(--color-gray-4a);
      font-size: var(--font-size-small); } }

.infoTile__list {
  display: flex;
  flex-direction: column; }
  .infoTile__list > * {
    padding: 8px 16px;
    margin-bottom: 32px; }
    @supports (--css: customprops) {
      .infoTile__list > * {
        padding: var(--spacing-1x) var(--spacing-2x);
        margin-bottom: var(--spacing-4x); } }
    .infoTile__list > *:nth-child(even) {
      flex-direction: row-reverse; }
  @media (min-width: 620px) {
    .infoTile__list {
      flex-direction: row; }
      .infoTile__list > * {
        border-color: #fad9d2;
        border-style: solid;
        border-width: 1px 0;
        margin-bottom: 0;
        padding: 16px 32px; }
        @supports (--css: customprops) {
          .infoTile__list > * {
            border-color: var(--color-primary-300);
            padding: var(--spacing-2x) var(--spacing-4x); } }
        .infoTile__list > *:nth-child(even) {
          flex-direction: row; }
      .infoTile__list > *:first-child {
        border-width: 1px 1px 1px 0; } }

.infoTile__icon {
  fill: #29B7CA;
  margin-right: 8px;
  width: 35px; }
  @supports (--css: customprops) {
    .infoTile__icon {
      fill: var(--color-secondary-200);
      margin-right: var(--spacing-1x);
      width: var(--svg-width-default); } }

.infoTile__icon__text {
  font-size: 16px; }

.infoTile__cta {
  margin-top: 16px; }
  @supports (--css: customprops) {
    .infoTile__cta {
      margin-top: var(--spacing-2x); } }

/*
Main Content

Wrapper for main content space of all pages.
*/
/* ----------------------------------------------------------------------
Panel - rectangular container with top/bottom padding and a specified
background color.
---------------------------------------------------------------------- */
.panel {
  padding: 24px;
  box-sizing: border-box; }
  @supports (--css: customprops) {
    .panel {
      padding: var(--spacing-3x); } }

.panel--PRIMARY {
  background-color: #fff2ef; }
  @supports (--css: customprops) {
    .panel--PRIMARY {
      background-color: var(--color-primary-400); } }

.panel--GRAY {
  background-color: #ececec; }
  @supports (--css: customprops) {
    .panel--GRAY {
      background-color: var(--color-gray-ec); } }

.panel--mix-border {
  border: 2px solid #d3d3d3; }
  @supports (--css: customprops) {
    .panel--mix-border {
      border: 2px solid var(--color-gray-d3); } }

.panel--mix-fullHeight {
  height: 100%; }

.row:not(:last-child) {
  margin-bottom: 24px; }
  @media (min-width: 620px) {
    .row:not(:last-child) {
      margin-bottom: 48px; } }
  @supports (--css: customprops) {
    .row:not(:last-child) {
      margin-bottom: var(--spacing-3x); }
      @media (min-width: 620px) {
        .row:not(:last-child) {
          margin-bottom: var(--spacing-6x); } } }

.row--divided {
  padding: 24px 0; }
  @media (min-width: 620px) {
    .row--divided {
      padding: 48px 0; } }
  @supports (--css: customprops) {
    .row--divided {
      padding: var(--spacing-3x) 0; }
      @media (min-width: 620px) {
        .row--divided {
          padding: var(--spacing-6x) 0; } } }

.row--backgroundImage {
  background-position: center;
  background-size: cover; }

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh; }

.site__hd {
  padding-top: 10px;
  margin-bottom: 0; }
  @media (min-width: 620px) {
    .site__hd {
      margin-bottom: 0; } }
  @supports (--css: customprops) {
    .site__hd {
      margin-bottom: 0; }
      @media (min-width: 620px) {
        .site__hd {
          margin-bottom: 0; } } }
  @media only screen and (max-width: 620px) {
    .site__hd {
      margin-bottom: 8px; }
      @supports (--css: customprops) {
        .site__hd {
          margin-bottom: var(--spacing-1x); } } }

.site__bd {
  flex: 1 0 auto;
  margin-bottom: 16px; }
  @media (min-width: 620px) {
    .site__bd {
      margin-bottom: 48px; } }
  @supports (--css: customprops) {
    .site__bd {
      margin-bottom: var(--spacing-2x); }
      @media (min-width: 620px) {
        .site__bd {
          margin-bottom: var(--spacing-6x); } } }

.site__hd_cart_integration {
  min-height: 33px;
  background: #29B7CA;
  padding-top: 10px;
  padding-bottom: 4px; }
  .site__hd_cart_integration p {
    font-size: 18px;
    color: #ffffff;
    text-decoration: none solid #ffffff;
    line-height: 24px;
    float: left;
    padding-left: 6%;
    text-align: center;
    font-weight: 500; }
  .site__hd_cart_integration .return_url {
    font-size: 18px;
    color: #ffffff;
    line-height: 24px;
    float: right;
    text-align: center;
    font-weight: 500; }
    .site__hd_cart_integration .return_url a {
      text-decoration: underline solid #ffffff;
      color: #ffffff; }
    @media (max-width: 479px) {
      .site__hd_cart_integration .return_url {
        float: none; } }
  @media (max-width: 479px) {
    .site__hd_cart_integration .wrapper {
      display: flex;
      flex-direction: column; }
    .site__hd_cart_integration p {
      justify-content: center;
      padding-left: 0%; } }
  @media (min-width: 768px) {
    .site__hd_cart_integration p {
      padding-left: 0%;
      font-size: 17px; }
    .site__hd_cart_integration a {
      font-size: 17px; } }

/*
Stereo

Lays out content that is separated to left and right areas within its container. By default, content is top-aligned.

.stero--centered - centers content on the vertical axis.
*/
.stereo {
  display: flex;
  justify-content: space-between; }

.stereo--centered {
  align-items: center; }

.stereo--wrap {
  flex-wrap: wrap; }
  .stereo--wrap > * {
    margin-bottom: 16px; }
    @supports (--css: customprops) {
      .stereo--wrap > * {
        margin-bottom: var(--spacing-2x); } }

@media (min-width: 480px) {
  .stereo--wrapXS {
    flex-wrap: nowrap; } }

@media (min-width: 620px) {
  .stereo--wrapSM {
    flex-wrap: nowrap; } }

@media (min-width: 768px) {
  .stereo--wrapMD {
    flex-wrap: nowrap; } }

@media (min-width: 960px) {
  .stereo--wrapLG {
    flex-wrap: nowrap; } }

.theme--landingPage .row:not(:last-child) {
  margin-bottom: 16px; }
  @media (min-width: 620px) {
    .theme--landingPage .row:not(:last-child) {
      margin-bottom: 32px; } }
  @supports (--css: customprops) {
    .theme--landingPage .row:not(:last-child) {
      margin-bottom: var(--spacing-2x); }
      @media (min-width: 620px) {
        .theme--landingPage .row:not(:last-child) {
          margin-bottom: var(--spacing-4x); } } }

.theme--landingPage .text--main {
  font-size: 22px; }
  @supports (--css: customprops) {
    .theme--landingPage .text--main {
      font-size: calc(var(--font-size-medium) - 2px); } }

.vr--1X {
  margin-bottom: 8px; }
  @supports (--css: customprops) {
    .vr--1X {
      margin-bottom: calc(var(--spacing-1x) * 1); } }

.vr--2X {
  margin-bottom: 16px; }
  @supports (--css: customprops) {
    .vr--2X {
      margin-bottom: calc(var(--spacing-1x) * 2); } }

.vr--3X {
  margin-bottom: 24px; }
  @supports (--css: customprops) {
    .vr--3X {
      margin-bottom: calc(var(--spacing-1x) * 3); } }

.vr--4X {
  margin-bottom: 32px; }
  @supports (--css: customprops) {
    .vr--4X {
      margin-bottom: calc(var(--spacing-1x) * 4); } }

.vr--5X {
  margin-bottom: 40px; }
  @supports (--css: customprops) {
    .vr--5X {
      margin-bottom: calc(var(--spacing-1x) * 5); } }

.vr--6X {
  margin-bottom: 48px; }
  @supports (--css: customprops) {
    .vr--6X {
      margin-bottom: calc(var(--spacing-1x) * 6); } }

.vr--7X {
  margin-bottom: 56px; }
  @supports (--css: customprops) {
    .vr--7X {
      margin-bottom: calc(var(--spacing-1x) * 7); } }

.vr--8X {
  margin-bottom: 64px; }
  @supports (--css: customprops) {
    .vr--8X {
      margin-bottom: calc(var(--spacing-1x) * 8); } }

/*
Wrapper

Wraps content and provides horizontal-only padding. Use `island` or your own top and bottom
padding properties for vertical padding.

.wrapper--PRIMARY-400 - Adds a background color of `#fff2ef`.
.wrapper--GRAY-EC - Adds a background color of `#ececec`.
*/
.wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px; }
  @supports (--css: customprops) {
    .wrapper {
      padding: 0 var(--spacing-2x); } }
  .wrapper .row .cardList {
    margin-top: 0%; }

.wrapper--PRIMARY-400 {
  background-color: var(--color-primary-400); }

.wrapper--GRAY-EC {
  background-color: var(--color-gray-ec); }

.wrapper--mix-border {
  border: 2px solid var(--color-gray-d3); }

/* ---------------------------------------------------------------------
 Completed Orders Styles
------------------------------------------------------------------------ */
.orderDetails {
  padding: 0 30px; }
  @media print {
    .orderDetails .noPrint {
      display: none; } }
  @media (min-width: 768px) {
    .orderDetails {
      padding: 0 var(--spacing-2x); } }
  .orderDetails p {
    color: #676767; }
  .orderDetails b, .orderDetails strong {
    font-weight: 700; }
  .orderDetails h1 {
    font-family: var(--font-family-default);
    font-size: 20px;
    font-weight: 700;
    color: #676767; }
    @media (min-width: 768px) {
      .orderDetails h1 {
        font-size: 26px;
        line-height: 42px; } }
  .orderDetails .orderDetails-section {
    display: block; }
    .orderDetails .orderDetails-section .orderDetailsGrid {
      display: flex;
      flex-wrap: wrap; }
      .orderDetails .orderDetails-section .orderDetailsGrid .orderDetailsGrid__column {
        width: 100%; }
        @media print {
          .orderDetails .orderDetails-section .orderDetailsGrid .orderDetailsGrid__column {
            width: 50% !important; } }
        @media (min-width: 768px) {
          .orderDetails .orderDetails-section .orderDetailsGrid .orderDetailsGrid__column {
            width: 50%; } }
    .orderDetails .orderDetails-section.actions {
      text-align: center; }
      @media (min-width: 768px) {
        .orderDetails .orderDetails-section.actions {
          text-align: right; } }
  .orderDetails .thankYouFor {
    text-align: center; }
    @media print {
      .orderDetails .thankYouFor {
        margin-bottom: 32px !important;
        text-align: left !important; } }
    @media (min-width: 768px) {
      .orderDetails .thankYouFor {
        margin-bottom: 32px;
        text-align: left; } }
  .orderDetails .orderNumberTotal {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 33px; }
    @media print {
      .orderDetails .orderNumberTotal {
        text-align: left !important; } }
    @media (min-width: 768px) {
      .orderDetails .orderNumberTotal {
        text-align: left;
        font-size: 20px; } }
  .orderDetails .cake-image {
    width: 300px;
    height: auto;
    margin: 0 auto;
    border: 2px solid #f4f0ed; }
    @media print {
      .orderDetails .cake-image {
        margin: 0 !important; } }
    @media (min-width: 768px) {
      .orderDetails .cake-image {
        width: 90%;
        margin: 0; } }
  .orderDetails .order-info {
    padding: 0 5px; }
  .orderDetails .order-info-item {
    line-height: 32px;
    font-size: 16px;
    color: #676767; }
    @media (min-width: 768px) {
      .orderDetails .order-info-item {
        font-size: 18px; } }
    .orderDetails .order-info-item h3 {
      font-size: 20px;
      font-weight: 700; }
      @media (min-width: 768px) {
        .orderDetails .order-info-item h3 {
          font-size: 22px; } }
  .orderDetails .pickupInfo {
    margin-top: 25px; }
  @media (min-width: 768px) {
    .orderDetails .pickupDate {
      min-height: 160px; } }
  .orderDetails .printBtn {
    margin-top: 30px;
    margin-bottom: 80px;
    width: 225px;
    text-transform: none;
    text-decoration: none !important;
    border-radius: 0; }

@media (min-width: 768px) {
  .diviner {
    max-width: 1140px;
    height: 2px;
    background-color: #f4f0ed; }
    .diviner.diviner__top {
      margin: 20px auto 0 auto; }
    .diviner.diviner__bottom {
      margin: 100px auto 0 auto; } }