.shopify-section--cart {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  z-index: 30;

  & zag-cart#mini_cart {
    display: flex;
    flex-flow: column nowrap;
    block-size: 100%;
    inline-size: 100%;
    max-inline-size: 56.25rem;
    margin: 0 auto;

    & .cart-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 2rem;
      border-block-end: 0.0625rem solid var(--grey-200-color);
    }

    & .cart-title {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: flex-start;
      gap: 0.5rem;
      inline-size: 100%;
      margin-inline: auto;

      & svg {
        inline-size: 0.625rem;
        block-size: 0.625rem;
      }
    }

    & .close-button {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      inline-size: 1.25rem;
      block-size: 1.25rem;
      color: var(--black-color);
      background-color: transparent;
      border: 0.0625rem solid var(--black-color);
      cursor: pointer;
      transition: 0.15s ease-out;

      & svg {
        inline-size: 0.5rem;
        block-size: 0.5rem;
        transition: 0.15s ease-out;
      }

      &:hover {
        opacity: 0.6;
      }
    }

    & .cart-body {
      block-size: 100%;
      overflow-y: auto;

      @media (width >= 60rem) {
        max-block-size: calc(
          100svh - var(--header-inset-block-start) - var(--header-block-size) -
            var(--mega-menu-inset-block-start) - 19rem
        );
      }

      & > * {
        border-block-start: 0.0625rem solid var(--grey-200-color);

        &:first-child {
          border-block-start: none;
        }
      }
    }

    & .empty-cart-message {
      font-style: italic;
      font-size: 0.875rem;
      padding-block: 2.25rem;
      padding-inline: 2rem;

      @media (width >= 60rem) {
        padding-block: 3.5rem;
      }
    }

    & .empty-cart-products {
      border: none;
    }

    & .empty-cart-title {
      font-size: 0.875rem;
      padding-inline: 2rem;
    }

    & .product-list {
      gap: 1.5rem;
      margin-block: 1rem 2rem;
      padding-inline: 2rem;
      scroll-padding-inline: 2rem;

      & .zag-product-card {
        min-inline-size: 12.5rem;
        max-inline-size: 12.5rem;
      }

      & .media-container {
        margin-block: 0rem;
        min-block-size: 17.5rem;
        max-block-size: 17.5rem;
      }

      & img:first-child {
        padding-block: 1rem;
        min-block-size: 17.5rem;
        max-block-size: 17.5rem;
      }

      & .content-container {
        inline-size: calc(100% + 3rem);
        margin-inline: -1.5rem;
      }

      & .title {
        font-size: 0.875rem;
      }

      & zag-price {
        font-size: 0.75rem;
      }

      & .label {
        inset-block-start: 1.5rem;
      }
    }

    & .cart-footer {
      padding: 1.5rem;
      margin-block-start: auto;
      border-block-start: 0.0625rem solid var(--grey-200-color);
    }

    & .subtotal-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
      margin-block-end: 1rem;
    }

    & .total-title {
      grid-column: span 1;
      align-self: center;
      text-align: start;
      font-size: 0.625rem;
    }

    & .total-price {
      grid-column: span 1;
      display: flex;
      position: relative;
      align-items: center;
      justify-content: flex-end;
      gap: 0.5rem;
      font-size: 0.75rem;
      text-align: end;

      & span {
        color: var(--grey-400-color);
        text-decoration: line-through;
      }
    }

    & .subtotal-container .shopify-block--button {
      grid-column: span 2;
      inline-size: 100%;

      @media (width >= 48rem) {
        grid-column: span 1;
      }
    }
  }

  & .cart-reassurances-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;

    & zag-slider {
      scrollbar-width: none;
    }

    & .reassurance-container {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      inline-size: 100%;

      & > * {
        display: inline-flex;
        gap: 0.5ch;
        inline-size: 100%;
        font-size: var(--body-s-font-size);
      }

      & a {
        color: var(--grey-400-color);
        text-decoration: underline;
        transition: 0.15s ease-out;

        &:hover {
          color: var(--black-color);
        }
      }
    }

    & .slider-bullets {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.375rem;
    }

    & zag-slider-control {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      inline-size: 0.375rem;
      block-size: 0.375rem;
      border-radius: 50%;
      background-color: var(--grey-300-color);
      cursor: pointer;
      transition: 0.15s ease-out;

      &:is([aria-current="true"], :hover) {
        background-color: var(--black-color);
      }
    }
  }

  .line-item-bundle-card {
    position: relative;
    padding: 1rem 1.5rem 2rem;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: transparent;
      transition: 0.15s ease-out;
      z-index: 100;
      pointer-events: none;
    }

    &[data-modifiers*="updating"] {
      pointer-events: none;

      &::after {
        background-color: rgba(255, 255, 255, 0.5);
      }
    }

    & .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-block-end: 0.25rem;
      border-block-end: 0.0625rem solid var(--grey-200-color);
    }

    & .price {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.5rem;
      font-size: 0.875rem;
      font-weight: 500;

      & span {
        color: var(--grey-400-color);
        text-decoration: line-through;
      }
    }

    & .components .price {
      position: absolute;
      inset-block-end: 0rem;
      inset-inline-end: 0rem;
      font-size: 0.75rem;
      font-weight: 400;
    }

    & .components {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    & .component {
      display: grid;
      position: relative;
      grid-template-columns: 5.625rem 1fr;
      column-gap: 1.5rem;

      &:first-child {
        margin-block-start: 1.5rem;
      }
    }

    &[data-modifiers*="hidden-components"] .component:not(:first-child) {
      display: none;
    }

    & .image-container {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      inline-size: 100%;
      block-size: 100%;
      aspect-ratio: 1;
      background-color: var(--grey-100-color);

      & img {
        max-inline-size: 100%;
        max-block-size: 5rem;
        border-radius: 0.25rem;
        object-fit: contain;
      }
    }

    & .content-container {
      display: flex;
      flex-flow: column nowrap;
      align-items: flex-start;
      justify-content: flex-start;
    }

    & .component .title {
      font-size: 0.75rem;
    }

    & .option {
      margin-block-start: 0.125rem;
      font-size: 0.75rem;
    }

    & .property {
      margin-block-start: 0.125rem;
      font-size: 0.75rem;
    }

    & .remove-line {
      position: relative;
      margin-block-start: auto;
      font-size: 0.75rem;
      font-weight: 500;
      text-transform: uppercase;
      color: var(--grey-400-color);
      border: none;
      appearance: none;
      cursor: pointer;
    }

    & .component-details-toggle {
      display: flex;
      position: absolute;
      align-items: center;
      justify-content: flex-end;
      gap: 0.75rem;
      inset-block-start: 0rem;
      inset-inline-end: 0rem;
      font-size: 0.75rem;
      text-decoration: underline;
      transition: 0.15s ease-out;

      & span {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        inline-size: 1.125rem;
        block-size: 1.125rem;
        background-color: transparent;
        color: var(--black-color);
        border: 0.0625rem solid var(--black-color);
        cursor: pointer;
        transition: 0.15s ease-out;
      }

      & svg {
        inline-size: 0.5625rem;
        block-size: 0.5625rem;
        transition: 0.15s ease-out;

        & path {
          transition: 0.15s ease-out;
        }
      }

      &[aria-expanded="true"] path:first-child {
        opacity: 0;
      }

      &:hover {
        opacity: 0.6;
      }
    }
  }

  & zag-cart#cart {
    display: grid;
    grid-template-rows: repeat(3, auto);
    max-inline-size: 90rem;
    margin-inline: auto;
    padding-block-start: 6.625rem;

    @media (width >= 60rem) {
      grid-template-columns: 60% 40%;
      grid-template-rows: repeat(2, auto);
      padding-block-start: 0rem;
    }

    & .item-part {
      position: relative;
      padding-block-end: 1.5rem;

      @media (width >= 60rem) {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        padding-block: 9.5rem 0;
      }

      & .cart-header {
        padding-block-end: 1.5rem;

        @media (width >= 60rem) {
          padding-block-end: 2rem;
        }
      }

      & .cart-title {
        padding-inline: var(--zag-gutter);
      }

      & .cart-description {
        margin-block-start: 1rem;
        padding-inline: var(--zag-gutter);

        & p {
          font-size: 0.75rem;
        }
      }

      & .cart-body {
        block-size: 100%;

        & > * {
          border-block-start: 0.0625rem solid var(--grey-200-color);
          padding-block: 2rem;
          padding-inline: var(--zag-gutter);
        }
      }
    }

    @media (width >= 60rem) {
      & .line-quantity-container {
        inset-inline-end: var(--zag-gutter);
      }
    }

    & .order-part {
      position: relative;
      padding-block: 1.5rem;
      padding-inline: var(--zag-gutter);
      background-color: var(--grey-100-color);

      @media (width >= 60rem) {
        display: block;
        grid-column: 2 / 3;
        grid-row: span 2;
        padding-block: 9.5rem;
      }

      /* Changes the cart right-end background color to grey on large screens */
      @media (width >= 85rem) {
        &::after {
          content: "";
          display: block;
          position: absolute;
          inline-size: 56.25rem;
          block-size: 100%;
          inset-block-start: 0;
          inset-inline-start: 100%;
          background-color: var(--grey-100-color);
        }
      }

      & .cart-reassurances-container {
        margin-block: 1.5rem;

        @media (width >= 60rem) {
          margin-block: 2.25rem;
        }
      }

      & .order-lines {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;

        & > * {
          grid-column: span 1;
          font-size: 0.875rem;
        }

        & > :nth-child(2n) {
          text-align: end;
        }

        & > :is(:nth-last-child(1), :nth-last-child(2)) {
          font-weight: 500s;
        }
      }

      & .cart-discount-container {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 1rem;
        margin-block-start: 1.5rem;

        @media (width >= 60rem) {
          margin-block-start: 2.25rem;
        }
      }

      & .cart-discount-input {
        padding: 0.75rem;
        font-size: 0.875rem;
        background-color: var(--white-color);
        border: 0.0625rem solid var(--grey-300-color);
        border-radius: 0.125rem;
      }

      & .set-discount-button {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem 1.5rem;
        background-color: var(--orange-color);
        color: var(--white-color);
        /* border: 0.0625rem solid var(--orange-color); */
        border-radius: 0.125rem;
        appearance: none;
        transition: 0.15s ease-out;

        &:hover {
          opacity: 0.6;
        }
      }

      & .applied-discounts {
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.5rem;
        margin-block-start: 1rem;
      }

      & .applied-discount {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.625rem;
        padding: 0.75rem;
        background-color: var(--white-color);
        border: 0.0625rem solid var(--grey-300-color);
        border-radius: 0.125rem;
        appearance: none;

        & svg {
          display: none;
          inline-size: 0.625rem;
          block-size: 0.625rem;
          cursor: pointer;
          transition: 0.15s ease-out;

          &:hover {
            opacity: 0.6;
          }
        }
      }

      & :is(.checkout-button, .return-button) {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-block-start: 1.5rem;

        @media (width >= 60rem) {
          margin-block-start: 2.25rem;
        }
      }

      & .payment-methods-container {
        margin-block-start: 1.5rem;

        @media (width >= 60rem) {
          margin-block-start: 2.25rem;
        }
      }

      & .payment-methods {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
        margin-block-start: 1rem;

        & svg {
          stroke: none;
        }
      }
    }

    & .faq-part {
      position: relative;
      padding-block: 1.5rem;
      padding-inline: var(--zag-gutter);
      border-block-start: 0.0625rem solid var(--grey-200-color);

      @media (width >= 60rem) {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        padding-block: 3rem;
      }

      & .questions {
        margin-block-start: 1rem;
      }

      & .question {
        border-block-start: 0.0625rem solid var(--grey-200-color);

        &:first-child {
          border-block-start: none;
        }
      }

      & summary {
        position: relative;
        padding-block: 1rem;
        list-style: none;
        user-select: none;
        cursor: pointer;
        transition: 0.3s ease-in-out allow-discrete;

        &::marker {
          display: none;
        }

        &::-webkit-details-marker {
          display: none;
        }

        & svg[data-name="plus"] {
          position: absolute;
          block-size: 0.625rem;
          inline-size: 0.625rem;
          inset-block: 50%;
          inset-inline-end: 0rem;
          translate: 0% -50%;

          & path {
            transition: 0.15s ease-out;
          }
        }
      }

      & details[open] summary svg[data-name="plus"] path:first-child {
        opacity: 0;
      }

      & [data-modifiers*="zag-content"] {
        padding-block-end: 1.5rem;

        & p {
          font-size: 0.75rem;
        }

        & a {
          display: inline;
          position: relative;
          text-decoration: underline;
        }
      }
    }
  }
}

/* Mini cart min block size override*/
.utility-link-container[data-utility="cart"] .mega-menu-container {
  min-block-size: initial;
}