/** ==================================================================== **/
/** Reset                                                                **/
/** ==================================================================== **/
@layer reset {

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

  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
  [role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body {
    -webkit-font-smoothing: antialiased;
    min-block-size: 100vh;
    line-height: 1.5;
  }

  h1,
  h2,
  h3,
  button,
  input,
  label {
    line-height: 1.4;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li {
    text-wrap: pretty;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    max-inline-size: 100%;
    display: block;
  }

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

    &:hover,
    &:focus,
    &:focus-visible,
    &:active {
      cursor: pointer;
    }
  }

  button {
    background-color: transparent;
    border: none;
    text-decoration: none;
  }

  #root,
  #__next {
    isolation: isolate;
  }

  article,
  aside,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  main,
  nav,
  section {
    display: block;
  }

  a {
    text-decoration: none;
    cursor: pointer;
  }
}

select, input {
  &:hover,
  *:focus {
    outline: 1px solid var(--primary-black);
  }
}

/** ==================================================================== **/
/** Fonts
/** ==================================================================== **/
@font-face {
  font-family: 'Amazon Ember';
  src: url('../fonts/AmazonEmber_Rg.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
}

@font-face {
  font-family: 'Ember Modern Display';
  src: url('../fonts/EmberModernDisplayStd-Regular.woff2') format('woff2'),
    url('../fonts/EmberModernDisplayStd-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Ember Modern Display';
  src: url('../fonts/EmberModernDisplayStd-Bold.woff2') format('woff2'),
    url('../fonts/EmberModernDisplayStd-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}


/** ==================================================================== **/
/** Base                                                                 **/
/** ==================================================================== **/
:root {
  /*-- Primary Colors --*/
  --primary-white: #fff;
  --primary-black: #000000;

  /* Colors */
  --gray-50: #f6f6f6;
  --gray-75: #F5F3EF;
  --gray-100: #f3f3f3;
  --gray-200: #f0f1f2;
  --gray-300: #e8e8e8;
  --gray-400: #e4e4e4;
  --gray-500: #d6d6d6;
  --gray-600: #9e9e9e;
  --gray-700: #6b7280;
  --gray-800: #374151;
  --gray-900: #111827;

  --squid-ink-50: #f7f7f8;
  --squid-ink-100: #ebeced;
  --squid-ink-200: #d3d5d8;
  --squid-ink-300: #bdc0c5;
  --squid-ink-400: #868d95;
  --squid-ink-500: #5e6a78;
  --squid-ink-600: #3f4a59;
  --squid-ink-700: #232f3e;

  --button-height: 48px;
  --add-to-cart-bg: #202020;
  --add-to-cart-bg-hover: #383838;
  --add-to-cart-color: #ffffff;

  /* Text */
  --squid-ink-800: #161e2d;
  --dark-squid-ink: #0F141A;

  /* header background */
  --prime-blue: #1999ff;
  --aqua-50: #e2f4f7;
  --aqua-100: #aadfe7;
  --aqua-200: #74c6d2;
  --aqua-300: #28a5b8;
  --aqua-400: #138296;

  /* Filter Button Color */
  --aqua-500: #007587;
  --aqua-600: #005f6e;
  --aqua-700: #004954;
  --aqua-800: #003740;

  /* Backgrounds */
  --body-bg: #fafafa;
  --category-bg: #f3f3f3;
  --category-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.15);
  --bwp-shadow: -1px 2px 8px 0 rgba(0, 0, 0, 0.18);
  --border-radius: 3px;


  /* Badges */
  --badge-bg-black: rgba(0, 0, 0, 0.80);
  --badge-bg-blue: #d2e3fe;
  --badge-border-blue: #a2c4f7;
  --badge-bg-yellow: #ffedbf;
  --badge-border-yellow: #ffdc7f;
  --badge-bg-pink: #ffcfcf;
  --badge-border-pink: #f7a2a2;

  --link-blue: #0972d3;
  --link-modal-blue: #00688D;
  --bg-baby-blue: #f2faff;

  /* Font */
  --font-heading: "Amazon Ember", sans-serif;
  --font-body: "Hanken Grotesk", sans-serif;
  --font-display: "Ember Modern Display", san-serif;
  --font-display-letter-spacing: 0.02em;
  --font-shadow: -1px 2px 8px 0 rgba(0, 0, 0, 0.18);

  /* Smol screen */

  /* 10px */
  --font-size-100: 0.65rem;
  /* 12px */
  --font-size-200: 0.75rem;
  /* 14px */
  --font-size-300: 0.875rem;
  /* 16px */
  --font-size-400: 1rem;
  /* 18px */
  --font-size-500: 1.125rem;
  /* 20px */
  --font-size-600: 1.25rem;
  /* 24px */
  --font-size-700: 1.5rem;
  /* 32px */
  --font-size-800: 2rem;
  /* 40px */
  --font-size-900: 2.5rem;
  /* 44px */
  --font-size-1000: 2.75rem;
  /* 53px */
  --font-size-1200: 3.3125rem;

  /* Medium screen = 768px */
  /* Beeg screen = 1024px */
  @media (width > 768px) {
    /* 12px */
    --font-size-200: 0.75rem;
    /* 14px */
    --font-size-300: 0.875rem;
    /* 18px */
    --font-size-400: 1.125rem;
    /* 20px */
    --font-size-500: 1.25rem;
    /* 24px */
    --font-size-600: 1.5rem;
    /* 32px */
    --font-size-700: 2rem;
    /* 40px */
    --font-size-800: 2.5rem;
    /* 48px */
    --font-size-900: 3rem;
    /* 53px */
    --font-size-1000: 3.3125rem;
    /* 60px */
    --font-size-1200: 3.75rem;
  }
}

html {
  /* BWP Button Styles */
  #buyWithPrimeButtonImage {
    display: flex;
    justify-content: center;
  }

  font-family: var(--font-body);
  --skin-primary-color-1: var(--link-blue) !important;

  body {
    font-size: var(--font-size-400);
    color: var(--primary-black);

    .page {
      /* Make footer stay on bottom of page */
      display: flex;
      flex-direction: column;
      min-height: 100vh;

      a.skip {
        color: var(--primary-black);
      }
    }

    h1,
    .h1,
    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6 {
      font-family: var(--font-heading);
    }
  }

  [role="main"] {
    min-height: 62vh;
  }

  /* Overriding Btn Primary */
  .btn-primary {
    color: #fff;
    background-color: var(--add-to-cart-bg);
    border-color: var(--add-to-cart-bg);

    &:hover {
      color: #fff;
      background-color: var(--add-to-cart-bg-hover);
      border-color: var(--add-to-cart-bg-hover);
      outline: 1px solid var(--add-to-cart-bg-hover);
    }

    &:focus,
    &.focus {
      color: #fff;
      background-color: var(--add-to-cart-bg-hover);
      border-color: var(--add-to-cart-bg-hover);
      box-shadow: 0 0 0 0.2rem rgba(32, 32, 32, 0.25);
    }

    &.disabled,
    &:disabled {
      color: #fff;
      background-color: var(--add-to-cart-bg);
      border-color: var(--add-to-cart-bg);
    }
  }

  .btn-outline-primary {
    color: var(--add-to-cart-bg);
    border-color: var(--add-to-cart-bg);

    &:hover {
      color: #fff;
      background-color: var(--add-to-cart-bg);
      border-color: var(--add-to-cart-bg);
    }

    &:focus,
    &.focus {
      box-shadow: 0 0 0 0.2rem rgba(32, 32, 32, 0.25);
    }

    &.disabled,
    &:disabled {
      color: var(--add-to-cart-bg);
      background-color: transparent;
    }
  }
}

a {
  color: var(--link-blue);
}

/** ==================================================================== **/
/** Layout                                                               **/
/** ==================================================================== **/

/* Restore Margins for text flow */
.bwp-flow>*+* {
  margin-block-start: var(--flow-space, 1rem);
}

/* AutoFit Grid */
.bwp-grid {
  --grid-max-col-count: 5;
  --grid-min-col-size: 200px;
  --grid-gap: 1rem;

  /* calculations, do not touch */
  --grid-col-size-calc: calc((100% - var(--grid-gap) * var(--grid-max-col-count)) / var(--grid-max-col-count));
  --grid-col-min-size-calc: min(100%,
      max(var(--grid-min-col-size), var(--grid-col-size-calc)));

  display: grid;
  gap: var(--grid-gap);

  grid-template-columns: repeat(auto-fit,
      minmax(var(--grid-col-min-size-calc), 1fr));
}

/* Equal Columns Grid */
.bwp-equal-columns {
  display: grid;
  gap: var(--equal-columns-gap, 1rem);
  align-items: var(--equal-columns-vertical-alignment, stretch);

  @media (width > 768px) {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }

  &[data-gap="large"] {
    --equal-columns-gap: 2rem;
  }

  &[data-alignment="centered"] {
    --equal-columns-vertical-alignment: center;
  }
}

/* Max Width Wrapper */
.bwp-wrapper {
  --wrapper-padding: 2rem;
  --wrapper-max-width: calc(1800px + 3rem);

  max-width: var(--wrapper-max-width);
  margin-inline: auto;
  padding-inline: var(--wrapper-padding);

  &[data-width="narrow"] {
    --wrapper-max-width: calc(720px + 2rem);
  }

  &[data-width="wide"] {
    --wrapper-max-width: calc(1330px + 2rem);
  }
}

/** ==================================================================== **/
/** Components                                                           **/
/** ==================================================================== **/
header {
  position: sticky;
  top: 0;
  z-index: 99;
}

/* Header */
.header-top {
  .header-top__inner {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-display);
    letter-spacing: var(--font-display-letter-spacing);
  }

  .header-top__logo {
    display: flex;
    gap: 1rem;
    justify-content: space-between;

    .header-top__logo-image {
      padding-block-start: 7px;
    }

    .header-top__logo-text {
      text-wrap: nowrap;
    }
  }

  .header-nav {
    .header-nav__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: nowrap;
      gap: 0 0.5rem;

      @media (width > 768px) {
        gap: 0.5rem 2.5rem;
      }
    }

    .header-nav__link {
      text-decoration: none;
    }
  }
}

.header-top,
.header-bwp-flow {
  a {
    padding: 0.5rem 0.25rem;
    background: none;
    color: var(--primary-white);
    border-radius: 3px;
    display: inline-block;
    font-weight: 600;

    &:hover,
    &:focus,
    &:focus-visible {
      outline: 1px solid var(--primary-white);
      color: var(--primary-white);
      text-decoration: none;

    }

    &[data-active="true"] {
      position: relative;

      &::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 6px;
        border-bottom: 2px solid white;
        width: 95%;
      }

    }
  }
}

/* 2nd Header - Bwp Flows / Sign-in Card/Express */
.header-bwp-flow {
  .header-bwp-flow__inner {
    display: flex;
    gap: 0.125rem;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-block: 0.25rem;
    --bwp-gap: 1.25rem;

    @media (width > 768px) {
      gap: 0 1rem;
    }
  }

  .header-bwp-flow__label {
    font-weight: 600;
  }

  a {
    font-weight: 500;
  }

  .header-bwp-flow__link--restart-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    margin-right: 6px;
    background-size: cover;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.891 0.800003C6.1982 0.800003 4.599 1.4008 3.3294 2.4688L2.6502 1.9288C2.4214 1.7496 2.0646 1.7176 1.8078 1.8512C1.5494 1.9864 1.3726 2.2976 1.3902 2.5888L1.5278 4.9376C1.5414 5.1464 1.6582 5.3688 1.823 5.4984C1.9566 5.604 2.1422 5.6648 2.3182 5.6648C2.3518 5.6648 2.3854 5.6624 2.4182 5.6576L4.795 5.3144C5.0886 5.2712 5.3606 5.0296 5.4374 4.7432C5.5126 4.4584 5.3998 4.1152 5.1686 3.9312L4.4694 3.3752C5.4454 2.6352 6.6374 2.2216 7.891 2.2216C11.0278 2.2216 13.5798 4.7744 13.5798 7.9112C13.5798 11.048 11.0278 13.6 7.891 13.6C4.8966 13.6 2.4062 11.2568 2.2214 8.2672C2.1966 7.8752 1.8646 7.564 1.467 7.6016C1.075 7.6256 0.777404 7.9632 0.801404 8.3544C1.0334 12.0936 4.147 15.0216 7.891 15.0216C11.8118 15.0216 15.0022 11.832 15.0022 7.9112C15.0022 3.9896 11.8118 0.800003 7.891 0.800003Z' fill='white'/%3E%3C/svg%3E%0A");
    transition: transform 0.3s ease;
  }

  .header-bwp-flow__link--restart:hover .header-bwp-flow__link--restart-icon {
    transform: rotate(-30deg);
  }
}

/* Better Mobile for Header */
.header-top,
.header-bwp-flow {
  font-size: 12px;

  @media (width > 768px) {
    font-size: var(--font-size-400);
  }
}

.header-top {
  .header-top__logo-text {
    display: none;

    @media (width > 768px) {
      display: block;
    }
  }
}

.header-bwp-flow__section--actions {
  display: none;

  @media (width > 768px) {
    display: block;
  }
}

/* 3rd Header - Search Bar */
.header-shop {
  margin-block: 0.5rem;

  @media (width > 768px) {
    margin-block: 1.65rem;
  }

  .header-shop__inner {
    display: grid;
    gap: 1rem;
    align-items: center;

    /* Mobile: brand on own line, search and actions together */
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "brand brand brand brand"
      "search search search actions";

    /* Medium screens: all on same line */
    @media (width > 768px) {
      grid-template-columns: auto 1fr 180px;
      grid-template-areas: "brand search search actions";
    }

    /* Logo */
    .header-shop__brand {
      grid-area: brand;
      display: flex;
      align-items: center;
      gap: 0.125rem;
    }

    .header-shop__menu-toggle {
      padding: 0;
      border: none;
      border-radius: 50%;
      background: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;

      &:hover,
      &:focus,
      &:focus-visible,
      &:active {
        background: var(--gray-200);
        /* outline: 1px solid var(--gray-300); */
      }
    }



    .header-shop__logo-image {
      max-width: 300px;
      width: 80%;
    }

    /* Search */
    .header-shop__search {
      grid-area: search;
      max-width: 900px;
      width: 100%;
      margin-inline: auto;

      .header-shop__search-form {
        display: flex;
        width: 100%;
        align-items: center;
        position: relative;

        .header-shop__search-input {
          background-color: var(--gray-300);
          border-radius: var(--border-radius);
          box-shadow: var(--category-shadow);
          border: none;
          height: 2.75rem;
          width: 100%;

          &:hover,
          &:focus,
          &:focus-visible,
          &:active {
            outline: 1px solid var(--primary-black);
            border-radius: 3px;
          }

          &::placeholder {
            text-align: left;
          }


          @media (width > 400px) {
            &::placeholder {
              text-align: center;
            }
          }

        }

        .header-shop__search-input__buttons {
          position: absolute;
          right: 6px;

          button {
            border: none;
            background: none;
          }

        }
      }

      .suggestions-wrapper {
        position: absolute;
        top: 48px;
        left: 0;
        z-index: 3;
        background: var(--primary-white);
        width: 100%;
        border-radius: calc(var(--border-radius) + 1px);

        .suggestions {
          position: static;
          width: 100%;
          border-radius: var(--border-radius);
          box-shadow: var(--category-shadow);
          font-family: var(--font-body);

          .header {
            div {
              font-weight: 500;
              color: var(--primary-black);
            }

            &:not(:first-child) {
              border-top: 1px solid var(--gray-600);
            }
          }

        }
      }
    }

    /* Actions */
    .header-shop__actions {
      grid-area: actions;
      display: flex;
      gap: 0.5rem;
      align-items: flex-end;
      justify-content: flex-end;
      max-width: 180px;
      margin-inline-start: auto;

      /* Mini Cart */
      .minicart .cart {

        .bwp-card {
          box-shadow: none;
          border: 1px solid var(--gray-200);
        }

        border-radius: var(--border-radius);
        font-family: var(--font-body);

        .minicart .line-item-name {
          width: 85%;
        }

        .remove-btn {
          color: var(--primary-black);
          border-radius: 50%;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;

          span {
            padding-block-end: 3px;
          }

          &:hover,
          &:focus,
          &:focus-visible {
            background-color: var(--gray-300);
          }
        }

        a.normal {
          color: var(--link-blue);

          &:hover,
          &:focus,
          &:focus-visible,
          &:active {
            outline: 1px solid var(--link-blue);
            color: var(--link-blue);
            border-radius: 3px;
            outline-offset: 3px;
          }
        }

        .minicart-footer {
          border-top: none;

        }
      }

      .minicart .minicart-quantity {
        background-color: var(--gray-300);
        color: var(--primary-black);
        top: -8px;
        left: -6px;
        font-weight: bold;
      }

      .minicart-link {
        display: flex;
      }

      .header-shop__menu-toggle {
        padding: 0;
        margin-block-start: auto;
        border: none;
        background: none;
      }

    }

  }

  /** ==================================================================== **/
  /** BwP Popup - Account Header Popover                                               **/
  /** ==================================================================== **/

  /* Account Header Popover Fixes */
  .header-shop__actions {
    position: relative;

    >* {
      flex-shrink: 0;
    }

    .header-shop__login,
    .header-shop__minicart {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;

      .header-shop__actions--link {
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;

        &:hover {
          padding: 0.75rem 0.25rem;
          background: var(--gray-200);
        }
      }

    }
  }

  .header-shop__login .user {
    position: relative;
    display: inline-block;

    &.nav-item {
      position: relative;
      width: 100%;
    }

    .popover {
      position: absolute;
      display: none;
      background: white;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      padding: 0;
      top: 100%;
      left: 0;
      min-width: 160px;
      z-index: 1000;
      margin-block-start: 8px;

      &.show {
        display: block;
      }

      &::before {
        content: '';
        position: absolute;
        top: -8px;
        left: 20px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #ccc;
      }

      &::after {
        content: '';
        position: absolute;
        top: -7px;
        left: 20px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid white;
      }

      .nav {
        list-style: none;
        margin: 0;
        padding: 8px 0;

        .nav-item {
          display: block;
          width: 100%;

          a {
            display: block;
            padding: 8px 16px;
            color: #333;
            text-decoration: none;
            white-space: nowrap;
            width: 100%;

            &:hover,
            &:focus {
              background-color: #f8f9fa;
              color: #333;
              text-decoration: none;
            }
          }
        }
      }
    }

    a#myaccount {
      display: flex;
      align-items: center;
      color: #333;
      text-decoration: none;

      &:hover,
      &:focus {
        color: #333;
        text-decoration: none;
      }

      svg {
        flex-shrink: 0;
      }
    }

    .user-message {
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 80px;
    }
  }

  /* No Results Styling */
  .no-results {
    text-align: center;
    padding: 3rem 1rem;

    h2 {
      color: var(--squid-ink-800);
      margin-block-end: 1rem;
    }

    p {
      color: var(--gray-700);
      margin-block-end: 0.5rem;
    }
  }

  /* Fix for mobile responsiveness */
  @media (width > 768px) {
    .header-shop__login .user .popover {
      left: -80px;
      min-width: 140px;
    }

    .header-shop__login .user .popover::before,
    .header-shop__login .user .popover::after {
      left: 90px;
    }

    .header-shop__login .user .user-message {
      max-width: 60px;
    }

    .header-shop__actions {
      gap: 0.75rem;
    }
  }
}

/* 4th Header - Categories "Collections" Banner -  Links */
.header-deals-banner {
  .header-deals-banner__inner {
    line-height: 1;
    font-family: var(--font-body);
    font-weight: 500;
    background: var(--gray-100);
    padding-inline: 1rem;
    padding-block: 0.65rem;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    white-space: nowrap;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    text-align: center;
    margin-block-end: 1.5rem;
    box-shadow: var(--category-shadow);
    border-radius: var(--border-radius);

    .header-deals-banner__item {
      min-width: 220px;
      margin-block: auto;
      height: 100%;

      a {
        color: var(--squid-ink-800);
        display: inline-block;
        width: 100%;
        height: 100%;
        padding-block: 0.65rem;
        padding-inline: 1rem;
      }
    }

    .header-deals-banner__link--bwp {
      background-position: center top 95%;
      background-repeat: no-repeat;
      height: 100%;
    }

    li:not(:last-child) {
      border-right: 1px solid var(--gray-600);
    }
  }
}

/* BwP Prime Modal Inspect */
.bwp-popover__wrapper {
  .bwp-popover {
    overflow: visible;
    --tether-offset: 1px;
    --tether-size: 8px;
    /* clip-path: inset(var(--tether-offset)) margin-box; */
    max-width: 400px;
    margin-inline-start: -57px;
    margin-inline-end: auto;
    margin-block-end: calc(var(--tether-offset) + 8px);
    bottom: anchor(top);
    left: anchor(left);
    background: white;
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid #CCD5DE;
    box-shadow: 0 2px 4px 0 rgba(11, 12, 12, 0.16);
    font-size: var(--font-size-500);

    .bwp-popover__title {
      font-size: var(--font-size-400);
      font-weight: 600;
    }

    .bwp-popover__description {
      font-size: var(--font-size-400);
      margin-block-end: 0.25rem;
    }

    .bwp-popover__list {
      margin-block-end: 0;

      .bwp-popover__link {
        font-size: var(--font-size-400);
        color: var(--link-modal-blue);
        text-decoration: underline;

        &:hover,
        &:focus-visible {
          color: var(--link-modal-blue);
          outline: 1px solid var(--link-modal-blue);
        }
      }

    }

    /* Little arrow */
    &::before {
      content: "";
      position: absolute;
      z-index: 1;
      top: calc(99% + 1px);
      left: 15%;
      width: calc(2 * var(--tether-size));
      height: var(--tether-size);
      background: inherit;
      clip-path: polygon(0 0, 50% 100%, 100% 0);
    }

    &::after {
      content: "";
      position: absolute;
      z-index: -9;
      top: calc(99% + 2.4px);
      left: 15%;
      width: calc(2 * var(--tether-size) + 0px);
      height: calc(var(--tether-size) + 1px);
      background: #CCD5DE;
      clip-path: polygon(0 0, 50% 90%, 100% 0);
      /* box-shadow: 0 2px 4px 0 rgba(11, 12, 12, 0.16); */
    }

    .bwp-popover-close {
      position: absolute;
      top: 10px;
      right: 10px;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      padding: 0;
      color: var(--primary-black);
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      padding-bottom: 4px;
      transition: background 0.1s ease;

      &:hover {
        background: var(--gray-400);
      }
    }
  }

  .bwp-popover-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #96cade;
    background: white;
    position: relative;
    position-anchor: --bwp-prime-popover;
    anchor-name: --bwp-prime-popover;

    /* Add blue center when button is clicked/active */
    .bwp-popover-button__icon {
      border-radius: 50%;
      height: 55%;
      width: 55%;
      border-color: #0285b3;
      background: #0285b3;
    }

    &:hover,
    &:active,
    &:focus {
      border-color: #0285b3;

    }
  }

}

/* Footer */
.footer-demo {
  padding: 1rem;
  font-family: var(--font-body);
  font-size: var(--font-size-300);
  font-weight: 400;

  .footer-demo__link-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-400);
    font-weight: 500;
  }

  .footer-demo__links {
    --flow-space: 0.65rem;
    display: flex;
    gap: 1.25rem;
    margin-block: 1.25rem;

    a {
      color: var(--primary-black);

      &:hover,
      &:focus,
      &:focus-visible {
        text-decoration: underline;
      }
    }

    .footer-demo__links__inner {
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
    }
  }

  .footer-demo__copyright {
    font-size: var(--font-size-200);
  }
}

/** ==================================================================== **/
/** Home Page
/** ==================================================================== **/

/* Home - Main Hero */
.home-main {
  font-family: var(--font-body);
  margin-block-end: 1.75rem;

  .home-main__hero {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    min-block-size: 44vh;
    place-content: center;
    background-position: right 50% top;
    position: relative;
  }

  .home-main__card {
    padding-block: 1rem;
    padding-inline: 1rem;
  }

  .home-main__title {
    font-size: var(--font-size-1000);
    font-weight: 500;
    font-family: var(--font-body);
    padding-block: 0.75rem;
    padding-inline: 1rem;
    text-align: left;
  }

  .home-main__description {
    font-size: var(--font-size-600);
    font-family: var(--font-body);
    padding-block: 1rem;
    font-weight: 400;
  }

}

/* Home - Categories Strip Tile - Content Slot */
.bwp-subtitle {
  font-size: var(--font-size-600);
  font-family: var(--font-body);
  font-weight: 500;
  padding-block: 1rem;
  border-bottom: 1px solid var(--gray-600);
  margin-block-end: 1.75rem;
}

/* Categories Strip Tile - Content Slot */
.bwp-categories {
  --category-card-size: 200px;

  @media (width > 768px) {
    --category-card-size: 282px;
  }

  --category-container-size: calc(var(--category-card-size) + 24px);

  .category-slot__inner {
    display: flex;
    width: 100%;
    gap: 1.25rem;
    height: var(--category-container-size);
    overflow-x: scroll;
    margin: 0;
    scroll-snap-type: x mandatory;
    user-select: none;
  }

  .bwp-category-item {
    flex: 0 0 var(--category-card-size);
    height: var(--category-card-size);
    width: var(--category-card-size);
    position: relative;
    box-shadow: var(--bwp-shadow);
    background-size: 67%;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;

    /* Override for Blenders image */
    &.bwp-category-item__blenders {
      background-size: 44%;
    }

    /* Override for BwP Category */
    &.bwp-category-item__buy-with-prime {
      background-color: var(--prime-blue);
      background-size: 50%;
    }

    .bwp-category-item__link {
      display: block;
      height: 100%;
    }
  }
}

/* Home Products */
.home-product-tiles {
  .homepage-product-listing {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;

    @media (width > 768px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}

/* Home Product Card */
.bwp-product-card {
  border-radius: var(--border-radius);
  box-shadow: var(--category-shadow);

  .bwp-product-image-container {
    position: relative;
    background-color: var(--primary-white);

    .quickview {
      position: absolute;
      bottom: 1rem;
      right: 1rem;


      .fa-inverse {
        color: var(--gray-50);
        border-radius: 100%;
      }

      &:hover,
      &:focus,
      &:focus-visible,
      &:active {
        outline: 1px solid black;
        border-radius: 50%;
        outline-offset: -2px;
      }
    }

    .bwp-product-image {
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: contain;
      max-height: 400px;
      min-height: 250px;
    }
  }

  .pdp-link {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    a {
      color: var(--primary-black);
    }
  }

  /* Pricing */
  .bwp-product-badge {
    color: var(--squid-ink-800);
    font-weight: 600;
    font-family: var(--font-body);
    min-width: 50px;
    position: absolute;
    text-align: center;
    bottom: 1rem;
    left: 1rem;
    border-radius: var(--border-radius);
    border: 2px solid;
    font-size: 1rem;
    padding-block: 2px;
    padding-inline: 8px;
  }

  .bwp-product-badge--yellow {
    background-color: var(--badge-bg-yellow);
    border-color: var(--badge-border-yellow);
  }

  .bwp-product-info {
    padding: 1rem;

    .pdp-link {
      font-size: var(--font-size-500);
      font-weight: 500;
    }
  }
}

/* BWP Articles - Reusable component */
.bwp-articles {
  margin-block-start: 4rem;

  .bwp-articles__card-title {
    font-family: var(--font-body);
    font-size: var(--font-size-500);
    margin: 0;
    padding: 0.75rem;
  }

  .bwp-articles__card-image-container {
    min-block-size: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    place-content: center;
    background-position: right 50% top 20%;
    position: relative;
  }

}

/* QuickView Modal */
.quick-view-dialog {
  max-width: 1200px;

  .modal-content {
    font-family: var(--font-body);
    border-radius: var(--border-radius);
    box-shadow: var(--category-shadow);

    .modal-header {
      align-items: center;
      padding: 1.5rem 3rem;
      background: var(--gray-300);
      border-bottom: none;
      border-radius: var(--border-radius) var(--border-radius) 0 0;

      a.full-pdp-link {
        color: var(--squid-ink-800);
        font-weight: 500;
        text-decoration: none;

        &:hover,
        &:focus,
        &:focus-visible,
        &:active {
          text-decoration: underline;
        }
      }

      button.close {
        opacity: 1;
        font-size: 3rem;
        font-weight: 300;
        color: var(--squid-ink-800);
        background: none;
        border: none;
        padding: 0;

        &:hover,
        &:focus,
        &:focus-visible,
        &:active {
          opacity: 0.7;
        }
      }
    }

    .modal-body {
      padding: 0;

      .product-quickview {
        padding: 1.5rem;

        .row {
          margin: 0;

          .col-sm-6 {
            padding: 0 1rem;

            &:first-child {
              padding-left: 0;
            }

            &:last-child {
              padding-right: 0;
            }
          }
        }

        .product-name {
          font-size: var(--font-size-600);
          font-weight: 600;
          margin-block-end: 1rem;
          color: var(--squid-ink-800);
        }

        .detail-panel {
          .attributes {
            .swatch {
              margin-block-end: 1.5rem;

              .attribute {
                &.quantity {
                  .quantity-select {
                    height: var(--component-height, 48px);
                    border: 1px solid var(--gray-600);
                    border-radius: var(--border-radius);
                    background: var(--primary-white);
                    font-size: var(--font-size-400);
                  }
                }
              }
            }
          }
        }
      }

      hr {
        border-color: var(--gray-600);
        margin: 1.5rem 0;
      }
    }

    .modal-footer {
      padding: 1.5rem 2rem;
      border-top: none;
      border-radius: 0 0 var(--border-radius) var(--border-radius);
    }
  }
}

/* Product Prime Badge - Popover */
.tile-body-footer {
  display: flex;
  align-items: center;
  min-height: 50px;

  .pt-2.pl-0.col-12 {
    width: auto;
    max-width: fit-content;
    padding-right: 8px;
  }

}

/** ==================================================================== **/
/** Category/Search Page
/** ==================================================================== **/

.bwp-heading {
  /* background-color: var(--primary-white); */
  /* box-shadow: var(--category-shadow); */
  padding-block: 1.5rem;
  padding-inline: 1rem;
  margin-block-end: 1.25rem;

  @media (width >=1024px) {
    padding-block: 3.25rem;
    padding-inline: 2rem;
  }

  .bwp-heading__title {
    font-size: var(--font-size-900);
  }
}

/** ==================================================================== **/
/** Content Pages
/** ==================================================================== **/
.bwp-content__inner {
  @media (width >=768px) {
    padding: 2rem;
  }

  .bwp-faq-banner {
    min-height: 120px;
    background-color: var(--prime-blue);
    border-radius: var(--border-radius);
    justify-content: center;
    color: var(--primary-white);
    padding: 2rem;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;

    @media (width >=500px) {
      flex-wrap: nowrap;
      padding: 3rem;
    }

    .bwp-faq-logo {
      width: 100%;
      min-width: 80px;
    }

    .bwp-faq-col-1 {
      padding-right: 1rem;

      @media (width >=500px) {
        border-inline-end: 1px solid white
      }
    }

    .bwp-faq-col-2 {
      border-block-start: 1px solid white;
      padding-block-start: 1rem;

      @media (width >=500px) {
        border-block-start: none;
        padding-block-start: 0;
      }
    }
  }

  .content-header {
    padding-block: 1rem;
    border-bottom: 1px solid var(--gray-600);
    margin-block-end: 1.75rem;
  }

  h1.page-title {
    background-color: var(--add-to-cart-bg);

    &:before {
      background-color: var(--add-to-cart-bg);
    }
  }

  ul {
    list-style-type: none;
    padding-inline-start: 0;
  }

  a {
    color: var(--link-blue);

    &:hover,
    &:focus,
    &:focus-visible,
    &:active {
      color: var(--link-blue);
    }

    &[role="button"] {
      /* Your CSS styles here */
      background-color: var(--add-to-cart-bg);
      color: var(--primary-white);
      border: none;

      &:hover,
      &:focus,
      &:focus-visible,
      &:active {
        background-color: var(--add-to-cart-bg-hover);
        color: var(--primary-white);
      }
    }
  }
}


/* Product & Filters */
.bwp-search-layout {
  @media (width >=1024px) {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 2rem;
  }

  .bwp-sidebar {
    @media (width < 1024px) {
      /* display: none; */
    }

    .bwp-sort select {
      font-size: var(--font-size-400);
      cursor: pointer;

      &:hover,
      &:focus,
      &:focus-visible,
      &:active {
        outline: 1px solid var(--primary-black);
        outline-offset: 2px;
      }
    }
  }

  .result-count {
    text-align: center;
    margin-block-end: 0.75rem;
  }

  /* Filters */
  .bwp-refinements {
    padding: 1.5rem;
    border-radius: 4px;
    background: var(--primary-white);

    @media (width > 1024px) {
      border-radius: var(--border-radius);
      box-shadow: var(--category-shadow);
    }

    button {
      font-size: var(--font-size-500);
      text-align: left;
      width: 100%;
      border-radius: 6px;

      &:hover,
      &:focus,
      &:focus-visible,
      &:active {
        outline: 1px solid var(--primary-black);
        outline-offset: -2px;
      }

      i {
        color: var(--aqua-400);

      }
    }

    .bwp-refinement__title {
      margin: 0;
      padding-block-end: 1rem;
      position: relative;
      cursor: pointer;
      padding-right: 20px;
      font-size: var(--font-size-500);
      font-family: var(--font-body);
      font-weight: 600;

      &::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 1.64265L1.37031 0.25L6.5 5.46371L11.6297 0.25L13 1.64265L6.5 8.25L0 1.64265Z' fill='%230F1111'/%3E%3C/svg%3E");
        content: '';
        display: block;
        width: 14px;
        height: 14px;
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        top: 15%;
        right: 0px;
      }
    }

    .bwp-refinement__card-header {
      border-bottom: 1.5px solid var(--gray-600);
    }

    .bwp-refinement__card-body {
      padding-block: 1rem;
      opacity: 1;
      transition: opacity 0.5s ease;
      overflow: hidden;
    }

    .bwp-refinement.collapsed {
      margin-block-end: 1rem;

      .bwp-refinement__title::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9' fill='none'%3E%3Cpath transform='rotate(180, 6.5, 4.5)' fill-rule='evenodd' clip-rule='evenodd' d='M0 1.64265L1.37031 0.25L6.5 5.46371L11.6297 0.25L13 1.64265L6.5 8.25L0 1.64265Z' fill='%230F1111'/%3E%3C/svg%3E");
      }

      .bwp-refinement__card-body {
        opacity: 0;
        max-height: 0;
        padding-block: 0;
      }
    }
  }

  /* Results Grid */
  .bwp-products {
    .product-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;

      @media (width >=768px) {
        grid-template-columns: repeat(2, 1fr);
      }

      @media (width >=1024px) {
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }


  /* Filter Summary */
  .bwp-filter-summary {
    margin-block: 1rem;

    ul {
      margin: 0;
      flex-wrap: wrap;
    }

    .bwp-filter-summary__option button {
      font-size: 1rem;
      display: inline-block;
      padding: 5px 10px 5px 32px;
      position: relative;
      border: 2px solid var(--gray-500);
      border-radius: 3px;
      background: var(--primary-white);

      &:before {
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-position: center center;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM4.46352 4.46227C4.07265 4.85245 4.07209 5.48561 4.46227 5.87648L6.583 8.001L4.46289 10.1229C4.07237 10.5134 4.07237 11.1466 4.46289 11.5371C4.85342 11.9276 5.48658 11.9276 5.87711 11.5371L7.997 9.417L10.1123 11.5365C10.5024 11.9274 11.1356 11.9279 11.5265 11.5377C11.9174 11.1476 11.9179 10.5144 11.5277 10.1235L9.411 8.003L11.5371 5.87711C11.9276 5.48658 11.9276 4.85342 11.5371 4.46289C11.1466 4.07237 10.5134 4.07237 10.1229 4.46289L7.997 6.587L5.87773 4.46352C5.48755 4.07265 4.85439 4.07209 4.46352 4.46227Z' fill='%23181818'/%3E%3C/svg%3E");
        position: absolute;
        top: 10px;
        left: 10px;
        width: 16px;
        height: 16px;
      }

      &:hover,
      &:focus,
      &:focus-visible,
      &:active {
        outline: 1px solid var(--primary-black);
        outline-offset: 2px;
      }
    }

  }

}


/** ==================================================================== **/
/** Product Detail Page
/** ==================================================================== **/


/** ==================================================================== **/
/** QuickView - Additional Styling
/** ==================================================================== **/

/* Variation Attributes in QuickView */
.quick-view-dialog .swatch {
  .variation-attribute {
    label {
      display: block;
      margin-block-end: 0.5rem;
      font-weight: 500;
      font-size: var(--font-size-400);
    }

    .swatches {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;

      .swatch-option {
        padding: 0.5rem 1rem;
        border: 2px solid var(--gray-600);
        border-radius: var(--border-radius);
        background: var(--primary-white);
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s ease;
        min-width: 50px;
        text-align: center;
        text-decoration: none;
        color: var(--squid-ink-800);

        &:hover {
          border-color: var(--gray-800);
          background-color: var(--gray-100);
          text-decoration: none;
        }

        &.selected {
          border-color: var(--squid-ink-800);
          background-color: var(--gray-200);
        }
      }
    }
  }
}

/* Image Carousel in QuickView */
.quick-view-dialog .carousel {
  .carousel-item img {
    max-height: 400px;
    object-fit: contain;
    margin: 0 auto;
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 5%;
    color: var(--squid-ink-800);

    &:hover {
      color: var(--squid-ink-600);
    }
  }
}

/* Promotions in QuickView */
.quick-view-dialog .promotions {
  .promotional-message {
    background: var(--badge-bg-yellow);
    border: 1px solid var(--badge-border-yellow);
    border-radius: var(--border-radius);
    padding: 0.5rem 1rem;
    font-size: var(--font-size-300);
    margin-block-end: 1rem;
  }
}

/* Quantity Selector in QuickView */
.quick-view-dialog .quantity-selector {
  margin-block-end: 1rem;

  .quantity-selector__controls {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    border: 1px solid var(--gray-600);
    border-radius: var(--border-radius);
    background-color: var(--primary-white);
    width: 100%;
    height: var(--component-height, 48px);
    overflow: hidden;
  }

  .quantity-selector__btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-400);
    font-weight: 500;
    color: var(--primary-black);
    transition: background-color 0.2s ease;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      background-color: var(--gray-100);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .quantity-selector__display {
    padding: 0.75rem 1rem;
    font-size: var(--font-size-400);
    font-weight: 500;
    color: var(--primary-black);
    background: transparent;
    min-width: 80px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/** ==================================================================== **/
/** Utilities                                                            **/
/** ==================================================================== **/
amazon-delivery-card {
  min-height: 164px;
  display: block;
}

.amazon-ember-modern {
  font-family: var(--font-display);
  letter-spacing: var(--font-display-letter-spacing);
}

.bwp-add-to-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: 1.5rem;
  text-decoration: none;
  height: var(--button-height);
  border-radius: var(--border-radius, 3px);
  width: 100%;
  background-color: var(--add-to-cart-bg, #202020);
  color: var(--add-to-cart-color, #ffffff);
  transition: background-color 0.2s ease;
  font-weight: 500;
  border: none;
  cursor: pointer;

  &:hover,
  &:focus {
    color: var(--add-to-cart-color, #ffffff);
    background-color: var(--add-to-cart-bg-hover, #383838);
  }
}

.bwp-font-body {
  font-family: var(--font-body);
}

.bwp-card {
  background: var(--primary-white);
  border-radius: var(--border-radius);
  box-shadow: var(--category-shadow);
}

.bwp-badge {
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--squid-ink-800);
  min-width: 50px;
  position: absolute;
  text-align: center;
  bottom: 1rem;
  left: 1rem;
  border-radius: var(--border-radius);
  border: 2px solid;
  font-size: 1rem;
  padding-block: 2px;
  padding-inline: 8px;
}

.bwp-badge--pink {
  background-color: var(--badge-bg-pink);
  border-color: var(--badge-border-pink);
}

.bwp-badge--blue {
  background-color: var(--badge-bg-blue);
  border-color: var(--badge-border-blue);
}

.bwp-badge--yellow {
  background-color: var(--badge-bg-yellow);
  border-color: var(--badge-border-yellow);
}

.bwp-badge--gray {
  border-color: var(--gray-500);
  background-color: var(--gray-50);
}

.bwp-badge--black {
  color: var(--primary-white, #fff);
  border: none;
  background-color: var(--badge-bg-black);
  border-radius: 28px;
}

.bwp-bg-navy {
  background-color: var(--squid-ink-700);
  color: var(--primary-white);

  a {
    color: var(--primary-white);
  }
}

.bwp-bg-dark {
  background-color: var(--squid-ink-800);
  color: var(--primary-white);

  a {
    color: var(--primary-white);
  }
}

.bwp-bg-baby-blue {
  background-color: var(--bg-baby-blue);
}

.bwp-bg-light {
  background-color: var(--gray-200);
}

.bwp-bg-white {
  background-color: var(--primary-white);
  color: var(--squid-ink-800);
}

.bwp-bg-gray {
  background-color: var(--gray-300);
}

.bwp-border-bottom {
  border-block-end: 1px solid var(--squid-ink-500);
}

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

.bwp-flex {
  display: flex;
  gap: var(--bwp-gap-block, 0.25rem) var(--bwp-gap, 1rem);
}

.bwp-flex-wrap {
  flex-wrap: wrap;
}

.bwp-flex-between {
  justify-content: space-between;
}

.bwp-flex-align-center {
  align-items: center;
}


/** ==================================================================== **/
/** Quickview Modal Improvements
/** ==================================================================== **/

.quickview-content {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.quickview-image {
  flex: 1;
  max-width: 50%;
}

.quickview-details {
  flex: 1;
  padding-left: 20px;

  &.bwp-product-card {
    border: none;
    box-shadow: none;
  }

  .product-name {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;

  }

  .prices {
    padding-block-end: 0;
    margin-bottom: 1rem;

    .bwp-product-badge {
      position: static;
      width: fit-content;
    }
  }

  .availability,
  .promitions {
    margin-bottom: 1rem;
  }

  .add-to-cart-section {
    margin-block: 1rem;
  }
}

@media (max-width: 768px) {
  .quickview-content {
    flex-direction: column;
    padding: 15px;
  }

  .quickview-image {
    max-width: 100%;
  }

  .quickview-details {
    padding-left: 0;
    padding-block-start: 15px;
  }
}

/* Animations */
@keyframes wiggle {

  0%,
  to {
    /* animation-timing-function: cubic-bezier(0, 0, .2, 1); */
    /* animation-timing-function: cubic-bezier(.8, 0, 1, 1); */
    animation-timing-function: ease;
    transform: none
  }

  50% {
    animation-timing-function: ease;
    transform: translateX(4px)
  }
}

@keyframes ping {

  75%,
  to {
    opacity: 0;
    transform: scale(1.5)
  }
}

@keyframes pulse {
  50% {
    opacity: .5
  }
}