/** Shopify CDN: Minification failed

Line 388:14 Unexpected "\".__alpaca\""

**/
@layer generic {
  /*
    Normalize
  */

  /*
    1. Correct the line height in all browsers.
    2. Prevent adjustments of font size after orientation changes in iOS.
  */
  html {
    -webkit-text-size-adjust: 100%; /* 2 */
    line-height: 1.15; /* 1 */
  }

  /*
    Remove the margin in all browsers.
  */
  body {
    margin: 0;
  }

  /*
    Render the `main` element consistently in IE.
  */
  main {
    display: block;
  }

  /*
    Correct the font size and margin on `h1` elements within `section` and
    `article` contexts in Chrome, Firefox, and Safari.
  */
  h1 {
    margin: 0.67em 0;
    font-size: 2em;
  }

  /*
    1. Add the correct box sizing in Firefox.
    2. Show the overflow in Edge and IE.
  */
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }

  /*
    1. Correct the inheritance and scaling of font size in all browsers.
    2. Correct the odd `em` font sizing in all browsers.
  */
  pre {
    font-size: 1em; /* 2 */
    font-family: monospace, monospace; /* 1 */
  }

  /*
    Remove the gray background on active links in IE 10.
  */
  a {
    background-color: transparent;
  }

  /*
    1. Remove the bottom border in Chrome 57-
    2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }

  /*
    Add the correct font weight in Chrome, Edge, and Safari.
  */
  b,
  strong {
    font-weight: bolder;
  }

  /*
    1. Correct the inheritance and scaling of font size in all browsers.
    2. Correct the odd `em` font sizing in all browsers.
  */
  code,
  kbd,
  samp {
    font-size: 1em; /* 2 */
    font-family: monospace, monospace; /* 1 */
  }

  /*
    Add the correct font size in all browsers.
  */
  small {
    font-size: 80%;
  }

  /*
    Prevent `sub` and `sup` elements from affecting the line height in
    all browsers.
  */
  sub,
  sup {
    position: relative;
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  /*
    Remove the border on images inside links in IE 10.
  */
  img {
    border-style: none;
  }

  /*
    1. Change the font styles in all browsers.
    2. Remove the margin in Firefox and Safari.
  */
  button,
  input,
  optgroup,
  select,
  textarea {
    margin: 0; /* 2 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    font-family: inherit; /* 1 */
  }

  /*
    Show the overflow in Edge.
  */
  button,
  input {
    overflow: visible;
  }

  /*
    Remove the inheritance of text transform in Edge, Firefox, and IE.
    Remove the inheritance of text transform in Firefox.
  */
  button,
  select {
    text-transform: none;
  }

  /*
    Correct the inability to style clickable types in iOS and Safari.
  */
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    appearance: button;
  }

  /*
    Remove the inner border and padding in Firefox.
  */
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  /*
    Restore the focus styles unset by the previous rule.
  */
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }

  /*
    Correct the padding in Firefox.
  */
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }

  /*
    1. Correct the text wrapping in Edge and IE.
    2. Correct the color inheritance from `fieldset` elements in IE.
    3. Remove the padding so developers are not caught out when they zero out
        `fieldset` elements in all browsers.
  */
  legend {
    display: table; /* 1 */
    box-sizing: border-box; /* 1 */
    padding: 0; /* 3 */
    max-width: 100%; /* 1 */
    color: inherit; /* 2 */
    white-space: normal; /* 1 */
  }

  /*
    Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
  progress {
    vertical-align: baseline;
  }

  /*
    Remove the default vertical scrollbar in IE 10+.
  */
  textarea {
    overflow: auto;
  }

  /*
    1. Add the correct box sizing in IE 10.
    2. Remove the padding in IE 10.
  */
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }

  /*
    Correct the cursor style of increment and decrement buttons in Chrome.
  */
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }

  /*
    1. Correct the odd appearance in Chrome and Safari.
    2. Correct the outline style in Safari.
  */
  [type="search"] {
    appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }

  /*
    Remove the inner padding in Chrome and Safari on macOS.
  */
  [type="search"]::-webkit-search-decoration {
    appearance: none;
  }

  /*
    1. Correct the inability to style clickable types in iOS and Safari.
    2. Change font properties to `inherit` in Safari.
  */
  ::-webkit-file-upload-button {
    appearance: button; /* 1 */
    font: inherit; /* 2 */
  }

  /*
    Add the correct display in Edge, IE 10+, and Firefox.
  */
  details {
    display: block;
  }

  /*
    Add the correct display in all browsers.
  */
  summary {
    display: list-item;
  }

  /*
    Add the correct display in IE 10+.
  */
  template {
    display: none;
  }

  /*
    Add the correct display in IE 10.
  */
  [hidden] {
    display: none;
  }

  /*
    Reset
  */

  /*
    Remove browser default margins from various elements
  */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  dl,
  dd,
  ol,
  ul,
  form,
  fieldset,
  legend,
  figure,
  caption,
  table,
  th,
  td,
  hr {
    margin: 0;
  }

  /*
    Remove special-browser treatment certain form controls
    See: http://stackoverflow.com/questions/7599533/ios-forces-rounded-corners-and-glare-on-inputs
  */
  button,
  html [type="button"],
  [type="reset"],
  [type="submit"],
  textarea,
  input:not([type="radio"]):not([type="checkbox"]) {
    appearance: none;
  }

  /*
    Remove clear buttons on inputs in IE.
    See: http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx
  */
  input::-ms-clear {
    display: none;
  }
}

@layer elements {
  /**
  * 1. ensure the page is always at least the height of the viewport
  * 2. ensure OSX fonts will look more consistent with other OSes that do not
  *    utilize sub-pixel anti-aliasing.
  * 3. changing this value will potentially break inline-block based layout
  * 4. ensure browsers will not automatically zoom fonts.
  * 5. ensure all pages, regardless of the height of their content, have a right-
  *    hand scrollbar to prevent visual jittering between pages.
  */
  html {
    -moz-osx-font-smoothing: grayscale; /* [2] */
    -webkit-font-smoothing: antialiased; /* [2] */
    text-size-adjust: 100%; /* [4] */
    box-sizing: border-box;
    height: 100%; /* [1] */
    overflow-y: scroll; /* [5] */
    scroll-behavior: smooth;
    font-size: 62.5%;

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

    &.scroll-lock {
      position: relative;
      height: 100vh;
      overflow: hidden;
      scrollbar-gutter: stable;

      & *:not(".__alpaca") {
        scrollbar-gutter: inherit;
      }
    }
  }

  body {
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
    min-height: 100%; /* [1] */
    color: var(--color-text);
    font: var(--font-paragraph);
  }

  :focus-visible {
    outline-color: var(--color-focus-ring);
  }

  a:empty,
  ul:empty,
  dl:empty,
  div:empty,
  section:empty,
  article:empty,
  p:empty,
  h1:empty,
  h2:empty,
  h3:empty,
  h4:empty,
  h5:empty,
  h6:empty {
    display: none;
  }

  /**
  * 1. Makes all images fluid, helping responsiveness
  * 2. Visually offsets the `alt` text that is displayed if the image fails to
  *    load.
  * 3. Removes white-space from the bottom of images. Safer solution to the usual
  *    `display: block;` fix.
  */
  img {
    vertical-align: middle; /* [3] */
    max-width: 100%; /* [1] */
    height: auto;
    font-style: italic; /* [2] */
  }

  /**
  * 1. Google Maps hates being told what to do. Remove the max width if an image
  *    exists within Google's styling pattern.
  */
  .gm-style img {
    max-width: none; /* [1] */
  }

  dl,
  ul,
  ol {
    margin: 0 0 var(--spacing-unit-s) var(--spacing-unit-s);
    padding: 0 0 0 var(--spacing-unit-s);
  }

  /**
  * Provide default margins for form containment elements.
  */
  fieldset,
  legend {
    margin-bottom: var(--spacing-unit-s);
  }

  /**
  * Provide consistent padding for fieldsets
  */
  fieldset {
    padding: var(--spacing-unit-xs);
  }

  /**
  * Set a larger default font size for basic form controls
  * For accessibility purposes, all input types are highlighted on focus.
  */
  select,
  input,
  textarea {
    background-color: var(--color-utility-01);
    color: var(--color-brand-01);
    font-size: 1.6rem;
  }

  /**
  * Ensure select menus cannot exceed with width of their parents.
  * We use a trick on mobile to let the select gracefully truncates
  * his content.
  *
  * @url https://stackoverflow.com/a/10795269/1538101
  */
  select {
    border-radius: 0;
    width: 100%;
    max-width: 100%;
  }

  /**
  * Ensure text within in a `textarea` displays at the top of the element now
  * that they can be wrapped within a `display: table-cell` element.
  */
  textarea {
    vertical-align: baseline;
  }

  /**
  * Ensure form controls in OSX will look more consistent with other OSes that do
  * not utilize sub-pixel anti-aliasing.
  */
  select,
  button,
  input,
  textarea {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
  }

  /**
  * Show clear indication that a form control is not interactive by changing the
  * cursor:
  *
  * 1. if the element itself is disabled or readonly
  */
  button[disabled],
  input[disabled],
  textarea[disabled],
  select[disabled],
  optgroup[disabled],
  option[disabled],
  button[readonly],
  input[readonly],
  textarea[readonly],
  select[readonly],
  optgroup[readonly],
  option[readonly] {
    cursor: not-allowed;
    background-color: var(--color-overlay-d01);
    color: var(--color-overlay-d02); /* [1] */
  }

  input[type="search"]::placeholder {
    color: var(--color-placeholder);
  }

  table {
    margin-bottom: var(--spacing-unit-s);
    border-collapse: collapse;
    width: 100%;
  }

  th,
  td {
    vertical-align: baseline;
    padding: var(--spacing-unit-xs);
    text-align: left;
  }

  th {
    font-weight: bold;
  }

  td {
    font-weight: normal;
  }

  live-region {
    display: block;
  }
}

@layer objects {
  .button-reset {
    cursor: pointer;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
    overflow: visible;
    color: inherit;
    font: inherit;
    line-height: normal;
    user-select: none;
  }

  .clickable-block {
    position: relative;

    a[href]:not([href=""]),
    button {
      &::after {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: "";
      }
    }
  }

  /**
   * Wraps a portion of a page's content to center the content at a given width.
   * This is useful for full-bleed sites where some internal content should be
   * full width unless the viewport is very wide.
   */
  .content-wrapper {
    margin-inline: var(--content-wrapper-spacing);
  }

  .content-wrapper--narrow {
    box-sizing: content-box;
    margin: 0 auto;
    padding-inline: var(--content-wrapper-spacing);
    max-width: 85rem;
  }

  .content-wrapper--very-narrow {
    box-sizing: content-box;
    margin: 0 auto;
    padding-inline: var(--content-wrapper-spacing);
    max-width: 55rem;
  }

  .content-wrapper--left {
    margin-inline-start: 0;
  }

  .content-wrapper--right {
    margin-inline-end: 0;
  }

  .fieldset-reset {
    margin: 0;
    border: 0;
    padding: 0;
  }

  .fit-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .full-bleed {
    position: relative;
    right: 50%;
    left: 50%;
    margin-right: -50vw;
    margin-left: -50vw;
    width: 100vw;
  }

  .inline-list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .list-reset {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .link-reset {
    color: inherit;
    text-decoration: none;
  }

  .text-left {
    text-align: left;
  }

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

  .text-right {
    text-align: right;
  }

  .text-box-reset {
    border: 0;
    background: none;
    padding: 0;
  }

  .vertical-flow {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit-s);
  }
  .vertical-flow > * {
    margin: 0;
  }
  .vertical-flow > :empty {
    display: none;
  }
}

@layer components {
  .button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    gap: var(--spacing-unit-xxs);
    transition:
      background-color var(--transition-speed),
      color var(--transition-speed),
      border-color var(--transition-speed);
    cursor: pointer;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    background: var(--color-brand-02);
    padding: var(--spacing-unit-xs) var(--spacing-unit-m);
    min-height: 4.8rem;
    overflow: visible;
    color: var(--color-white);
    font: var(--font-button-text);
    line-height: 1;
    user-select: none;
    text-decoration: none;

    &:hover {
      background-color: var(--color-brand-03);
      text-decoration: none;
    }

    &:focus-visible {
      outline-color: var(--color-brand-01);
    }
  }

  .button--secondary {
    border-color: var(--color-utility-01);
    background: var(--color-white);
    color: var(--color-brand-01);

    &:hover,
    &:focus-visible {
      outline-color: var(--color-brand-01);
      background: var(--color-utility-01);
    }
  }

  .button--subtle {
    border-color: var(--color-utility-01);
    background: var(--color-utility-01);
    color: var(--color-brand-01);

    &:hover,
    &:focus-visible {
      background-color: var(--color-utility-01);
    }
  }

  .button--outline {
    border-color: var(--color-utility-01);
    background: transparent;
    color: var(--color-utility-01);

    &:hover,
    &:focus-visible {
      background-color: var(--color-utility-01);
      color: var(--color-brand-01);
    }
  }

  .button--disabled,
  .button:disabled {
    opacity: 0.8;
    cursor: not-allowed;
    border-color: transparent;
    background-color: var(--color-overlay-d01);
    color: var(--color-overlay-d02);
    text-decoration: line-through;

    &:hover,
    &:focus-visible {
      opacity: 0.8;
      border-color: transparent;
      background-color: var(--color-overlay-d01);
      text-decoration: line-through;
    }
  }

  .button--full-width {
    box-sizing: border-box;
    width: 100%;
    text-align: center;

    .hero & {
      @media screen and (max-width: 768px), print {
        margin: 0 auto;
        max-width: 33rem;
      }
    }
  }

  .button--text {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: var(--spacing-unit-s);
  }

  .button--simple {
    border-color: transparent;
    border-radius: var(--border-radius);
    background: transparent;
    color: var(--color-brand-01);

    &:hover,
    &:active {
      border-color: transparent;
      background: transparent;
      color: var(--color-brand-02);
    }

    &:disabled:hover,
    &:disabled:focus {
      border-color: transparent;
      background: transparent;
      color: var(--color-overlay-d02);
    }
  }

  .button--quick-add,
  .button--size-guide {
    border: none;
    background: transparent;
    padding: 0.9rem;
    min-height: auto;
    color: rgba(var(--color-brand-01-rgb), 0.5);

    &:hover,
    &:focus-visible,
    &:disabled {
      background-color: transparent;
    }

    &:disabled {
      opacity: 0.4;
      background-color: transparent;
      &:hover {
        opacity: 0.4;
        background-color: transparent;
      }
    }
  }

  .button--size-guide {
    padding: 0;
    color: var(--color-brand-01);

    &:hover,
    &:focus-visible {
      color: var(--color-brand-02);
    }
  }

  .checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-unit-xs);
    cursor: pointer;

    input {
      clip: rect(0 0 0 0);
      position: absolute;
      clip-path: inset(50%);
      width: 1px;
      height: 1px;
      overflow: hidden;
      white-space: nowrap;
    }

    .icon {
      border-radius: var(--border-radius);
      width: 2.4rem;
      height: 2.4rem;
      color: var(--color-overlay-d01);
    }

    .icon--checkbox-checked {
      display: none;
    }
  }

  .checkbox:has(input:checked) {
    .icon--checkbox-checked {
      display: block;
      background: var(--color-brand-01);
      color: var(--color-brand-01);
    }

    .icon--checkbox-blank {
      display: none;
    }
  }

  .checkbox:has(input:disabled) {
    opacity: 0.8;
    color: var(--color-overlay-d01);

    .icon {
      opacity: 0.8;
      background: var(--color-overlay-d01);
      color: var(--color-overlay-d01);
    }
  }

  .checkbox:focus-within {
    .icon {
      outline: 2px solid var(--color-temp-black);
      outline-offset: -2px;
      border-radius: var(--border-radius);
      color: var(--color-brand-01);
    }
  }

  .checkbox:has([aria-invalid="true"]) {
    color: var(--color-brand-02);

    .icon {
      color: var(--color-brand-02);
    }
  }

  .icon {
    display: block;
    flex-shrink: 0;

    svg {
      display: block;
      width: 100%;
      height: auto;

      .button & {
        width: auto;
        height: 1em;
      }

      .button--quick-add & {
        height: 2.4rem;
      }

      .button--quick-add:not(:disabled):focus-visible &,
      .button--quick-add:not(:disabled):hover & {
        fill: var(--color-brand-03);
      }

      .email-form__success-icon &,
      .email-form__error-icon & {
        width: auto;
      }
    }
  }

  .message {
    display: flex;
    gap: var(--spacing-unit-xs);
    opacity: 1;
    transition: opacity var(--transition-speed) ease-out;
    margin: 0 0 var(--spacing-unit-s);
    border-radius: var(--border-radius);
    background: var(--color-temp-blue);
    padding: var(--spacing-unit-s) var(--spacing-unit-s);
    overflow: hidden;
    color: var(--color-temp-white);

    &[removing] {
      opacity: 0;
    }
  }

  .message--block {
    display: block;
  }

  .message--warning {
    background: var(--color-utility-02);
    color: var(--color-brand-01);
  }

  .message--success {
    background: var(--color-success);
    color: var(--color-brand-01);
  }

  .message--error {
    background: var(--color-brand-02);
  }

  .message__type {
    margin: 0;
  }

  .message__icon {
    display: none;
    opacity: 0.3;
    background: transparent;
    width: 40px;
    height: 40px;
  }

  .message__icon--error {
    .message--error & {
      display: block;
    }
  }

  .message__icon--info {
    .message--info & {
      display: block;
    }
  }

  .message__icon--success {
    .message--success & {
      display: block;
    }
  }

  .message__icon--warning {
    .message--warning & {
      display: block;
    }
  }

  .message__text {
    flex-grow: 1;
    margin: 0;
    font-weight: bold;

    a {
      transition: opacity var(--transition-speed);
      color: inherit;

      &:hover {
        opacity: 0.75;
      }
    }
  }

  .message__dismiss-action {
    margin: 0;
  }

  .message__dismiss-icon {
    transition: opacity var(--transition-speed);

    &:hover {
      opacity: 0.75;
    }
  }

  .page-content {
    position: relative;
    flex-grow: 1;
    z-index: 1;

    .template-index
      .page-header:has(.page-header__content--transparent-on-homepage)
      ~ & {
      margin-top: calc(var(--header-height) * -1);
    }
  }

  .page-footer {
    border-top: var(--border-width) solid var(--color-borders-light);
  }

  .page-footer__content {
    display: grid;
    grid-template-areas: "email" "social" "menus" "utility";
    padding-inline: var(--content-wrapper-spacing);

    @media screen and (min-width: 1024px), print {
      grid-template-columns: 3fr 1fr;
      grid-template-areas: "menus email" "menus social" "utility utility";
    }
  }

  .page-messages {
    position: fixed;
    top: var(--spacing-unit-s);
    right: var(--spacing-unit-s);
    left: var(--spacing-unit-s);
    z-index: 4;
  }

  .property {
    margin-bottom: var(--spacing-unit-s);
  }

  .property__note {
    margin: var(--spacing-unit-xs) 0 0;
    font: var(--font-label);

    .property--invalid & {
      color: var(--color-brand-02);
    }
  }

  .radio {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit-xs);

    input {
      clip: rect(0 0 0 0);
      position: absolute;
      clip-path: inset(50%);
      width: 1px;
      height: 1px;
      overflow: hidden;
      white-space: nowrap;
    }

    .icon {
      width: 2.4rem;
      height: 2.4rem;
      color: var(--color-brand-01);
    }

    .icon--radio-checked {
      display: none;
    }
  }

  .radio:has(input:checked) {
    .icon--radio-checked {
      display: block;
      color: var(--color-brand-01);
    }

    .icon--radio-blank {
      display: none;
    }
  }

  .radio:has(input:disabled) {
    color: var(--color-overlay-d01);

    .icon {
      color: var(--color-overlay-d01);
    }
  }

  .radio:focus-within {
    .icon {
      outline: 2px solid var(--color-brand-01);
      outline-offset: -2px;
      border-radius: 50%;
      color: var(--color-brand-01);
    }
  }

  .radio:has([aria-invalid="true"]) {
    color: var(--color-brand-02);

    .icon {
      color: var(--color-brand-02);
    }
  }

  .select {
    appearance: none;
    cursor: pointer;
    border: var(--border-width-form-input) solid var(--color-borders-light);
    border-radius: var(--border-radius);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');
    background-position: center right var(--spacing-unit-xs);
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-color: var(--color-brand-04);
    padding: var(--spacing-unit-xs) calc(24px + var(--spacing-unit-s))
      var(--spacing-unit-xs) var(--spacing-unit-s);
    width: 100%;
    color: var(--color-temp-black);
    font: var(--font-input);
    line-height: normal;

    &:disabled {
      opacity: 0.8;
      cursor: not-allowed;
      background-color: var(--color-overlay-d01);
      color: var(--color-overlay-d02);
    }
  }

  .select--invalid,
  .select:invalid,
  .select[aria-invalid="true"] {
    border-color: var(--color-brand-02);
  }

  .shopify-section {
    position: relative;
  }

  .shopify-section__background-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .shopify-section__content {
    position: relative;
  }

  .swatch__image {
    display: block;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .tabs__triggers {
    display: flex;
    margin: 0 0 var(--spacing-unit-s);
    border-bottom: var(--border-width) solid var(--color-borders);
  }

  .tabs__trigger {
    display: block;
    padding: var(--spacing-unit-xs);

    &[active="true"] {
      transform: translateY(1px);
      border: var(--border-width) solid var(--color-borders);
      border-bottom: var(--border-width) solid var(--color-temp-white);
    }
  }

  .tabs__panel {
    display: none;

    &[active="true"] {
      display: block;
    }
  }

  .text-box {
    border: var(--border-width-form-input) solid var(--color-borders-light);
    border-radius: var(--border-radius);
    background: var(--color-brand-04);
    padding: var(--spacing-unit-xs) var(--spacing-unit-s);
    width: 100%;
    color: var(--color-brand-01);
    font: var(--font-input);
    line-height: 1;

    &:disabled {
      opacity: 0.8;
      background-color: var(--color-overlay-d01);
      color: var(--color-overlay-d02);
    }
  }

  .text-box--fixed-width {
    width: 200px;
  }

  .text-box--multi-line {
    height: 150px;
  }

  .text-box--invalid,
  .text-box[aria-invalid="true"],
  .property--invalid .text-box {
    border-color: var(--color-brand-02);
  }

  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-end {
    align-items: end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-around {
    justify-content: space-around;
  }
}

@layer overrides {
  /* break-word */
  .break-word {
    hyphens: auto;
    word-break: break-word;
  }

  /* hidden-if-js-enabled */
  .hidden-if-js-enabled {
    .js & {
      display: none;
    }
  }

  .hidden-unless-js-enabled {
    display: none;
  }

  .hidden-unless-js-enabled {
    .js & {
      display: var(--hidden-unless-property, block);
    }
  }

  /* hidden */
  .hidden {
    display: none;
  }

  .hidden-until-medium {
    @media screen and (max-width: 767px), print {
      display: none;
    }
  }

  .hidden-until-wide {
    @media screen and (max-width: 1023px), print {
      display: none;
    }
  }

  .hidden-until-x-wide {
    @media screen and (max-width: 1439px), print {
      display: none;
    }
  }

  .hidden-at-medium {
    @media screen and (min-width: 768px), print {
      display: none;
    }
  }

  .hidden-at-wide {
    @media screen and (min-width: 1024px), print {
      display: none;
    }
  }

  .hidden-at-x-wide {
    @media screen and (min-width: 1440px), print {
      display: none;
    }
  }

  .hidden-if-empty {
    &:empty {
      display: none;
    }
  }

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

  /* visually-hidden */
  .visually-hidden {
    clip: rect(0 0 0 0);
    position: absolute;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
  }

  .no-margin {
    margin: 0;
  }

  /* Stamped reviews star rating (PDP) */
  .stamped-badge-caption {
    color: var(--color-utility-03);
    font: var(--font-label);
    letter-spacing: var(--letter-spacing-label);
  }

  /* Stamped reviews main widget (PDP) */
  #stamped-main-widget {
    margin: 0 !important;
  }

  .stamped-container[data-widget-style] {
    margin: 0 !important;
    max-width: unset !important;
  }

  .stamped-header-title {
    margin-bottom: var(--spacing-unit-m) !important;
    font: var(--font-heading-2);
    text-align: left !important;
  }

  .stamped-summary-actions-newreview {
    float: left !important;
    margin-top: var(--spacing-unit-m) !important;
    box-shadow: none !important;
    border: var(--border-width) solid var(--color-overlay-d01) !important;
    border-radius: var(--border-radius) !important;
    padding: var(--spacing-unit-s) !important;
    width: auto !important;
    color: var(--color-brand-01) !important;
    font: var(--font-button-text) !important;

    @media screen and (min-width: 1024px), print {
      float: right !important;
      margin-top: 0 !important;
    }

    &::before {
      content: none !important;
    }
  }

  .stamped-summary-actions-newreview:before {
    content: none;
  }

  .stamped-tab-container {
    display: none !important;
  }

  .summary-overview {
    float: left;
    margin-bottom: var(--spacing-unit-m) !important;
  }

  .stamped-summary-ratings {
    display: none !important;
  }

  .stamped-summary-caption-1 {
    float: left !important;
  }

  .stamped-summary-starrating {
    float: left !important;
  }

  .stamped-summary-caption-2 {
    display: block !important;
    float: left !important;
  }

  .stamped-summary-text {
    .stamped-summary-caption-2 & {
      margin-top: 0 !important;
      font: var(--font-running-head);
      font-size: var(--font-size-running-head) !important;
      letter-spacing: var(--letter-spacing-running-head);
      text-transform: uppercase;

      @media screen and (min-width: 1024px), print {
        margin-top: 10px;
      }
    }
  }

  .stamped-summary-text-1 {
    .stamped-summary-caption-1 & {
      color: var(--color-brand-02);
      font: var(--font-heading-1);
      font-weight: 400 !important;
    }
  }

  #stamped-sort-select {
    border: var(--border-width) solid var(--color-borders-light) !important;
    border-radius: var(--border-radius) !important;
    background-image: url('data:image/svg+xml,<svg width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6"></path></svg>') !important;
    background-position: center right var(--spacing-unit-s) !important;
    background-size: initial;
    background-color: var(--color-brand-04) !important;
    padding: var(--spacing-unit-xs) var(--spacing-unit-s) !important;
    min-width: 156px !important;
    min-height: 48px !important;
    font: var(--font-paragraph);
    font-size: var(--font-size-paragraph) !important;
  }

  .stamped-review-header-title {
    margin-bottom: var(--spacing-unit-xs) !important;
    color: var(--color-brand-01) !important;
    font: var(--font-heading-6) !important;
  }

  .stamped-review-content-body {
    font: var(--font-paragraph) !important;
    font-size: var(--font-size-paragraph) !important;
  }

  .created {
    .stamped-review-content-wrapper & {
      font: var(--font-label) !important;
    }
  }

  .author {
    .stamped-review-header & {
      font: var(--font-paragraph) !important;
    }
  }

  /* Recipe Kit */
  #rk_parent .rk_column_third .rk_atc_all {
    margin-bottom: 15px !important;
  }

  #rk_parent .rk_modern .rk_container .rk_grid {
    display: block !important;
  }

  #rk_parent .rk_modern .rk_container .rk_grid .rk_column_third {
    padding-right: 0 !important;
    padding-bottom: 20px !important;
  }

  #rk_parent .rk_atc_btn {
    border: var(--border-width) solid var(--color-brand-02) !important;
    border-radius: var(--border-radius) !important;
    background: var(--color-brand-02) !important;
    text-decoration: none;

    &:hover {
      transition: background var(--transition-speed) !important;
      background: var(--color-brand-03) !important;
      color: var(--color-brand-04) !important;
    }
  }

  #rk_parent .rk_column_third #rk_checkout_div.show_checkout_div {
    flex-direction: column;
    gap: var(--spacing-unit-xs);
  }

  #rk_parent .rk_cart_btn {
    border: var(--border-width) solid var(--color-utility-01) !important;
    border-radius: var(--border-radius) !important;
    text-decoration: none;

    &:hover {
      transition:
        background var(--transition-speed),
        border-color var(--transition-speed) !important;
      border-color: var(--color-brand-01) !important;
      background: var(--color-utility-01) !important;
    }
  }

  #rk_parent .rk_atc_all,
  #rk_parent .rk_checkout_btn {
    border: var(--border-width) solid var(--color-brand-02) !important;
    border-radius: var(--border-radius) !important;
    background: var(--color-brand-02) !important;
    color: var(--color-brand-04) !important;
    text-decoration: none;

    &:hover {
      opacity: 1 !important;
      transition: background var(--transition-speed) !important;
      background: var(--color-brand-03) !important;
    }
  }
}