/* STL start page */
#html-body {
  .product-box-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .product-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .account .product-box-button {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  &.account .product-box-button {
    flex-direction: row;
  }

  .widget-product-box {
    width: 100%;
  }

  &.account .product-box-product-price .price {
    font-size: 18px;
  }

  &.cms-kottlador-stamkundsladan-start .product-box-points {
    display: none;
  }

  .product-box-points {
    background: var(--purple-light);
    font-family: var(--roboto);
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;

    span {
      color: var(--purple);
    }
  }

  .product-box-info-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  @media (min-width: 1025px) {
    .product-cards {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    &.account .product-box-button {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    &.account .product-box-button .tocart {
      width: 100%;
    }
  }
}

/* New STL */
#html-body.stl-product-page #maincontent .columns {
  display: flex;
}

/* New STL */
#html-body.stl-product-page #maincontent,
/* My account - STL choose products */
#html-body.account #maincontent {
  .bundle-options-wrapper {
    padding: 0;
    background: transparent;

    .required {
      display: none;
    }
  }

  .bundle-options-wrapper .nested.options-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

    .field.choice {
      border: none;
    }
  }

  .bundle-options-wrapper {
    float: unset;
    width: 100%;
  }

  .product-options-wrapper {
    float: unset;
    width: auto;
  }

  .bundle-options-wrapper .navbar {
    width: auto;
  }

  .bundle-option-box {
    height: 100%;
  }

  .bundle-option-content {
    height: 100%;
  }

  .fieldset-bundle-options h3 {
    font-weight: 400;
    margin: 16px 0;
  }

  .product-add-form .product-options-wrapper .field .control {
    width: auto;
  }

  .bundle-option-card {
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: var(--white);
  }

  /* New STL */
  #product_addtocart_form,
  /* My account - STL choose products */
  #subscription_update_form {
    display: flex;
    flex-direction: column;
  }

  .bundle-calculator-wrapper .track::before,
  .bundle-calculator-wrapper .track::after {
    content: "";
    display: block;
  }

  .bundle-calculator-wrapper .meter {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
  }

  .bundle-calculator-wrapper .track-wrapper {
    flex-grow: 1;
  }

  .bundle-calculator-wrapper .text span {
    font-weight: 600;
  }

  .summary-modal .button-small {
    white-space: nowrap;
  }

  .summary-modal .button-small:active,
  .summary-modal .button-small:focus {
    background-color: var(--green-light);
  }

  .summary-modal .action-open::after {
    content: "";
    display: block;
    height: 20px;
    width: 20px;
    background: url('../images/arrow-up-white.svg') no-repeat; 
    background-size: contain;
    margin-left: 8px;
  }

  .summary-modal .action-close::after { 
    content: "";
    display: block;
    height: 20px;
    width: 20px;
    background: url('../images/arrow-up-white.svg') no-repeat;
    background-size: contain;
    margin-left: 8px;
    transform: rotate(180deg);
  }

  .bundle-option-image {
    position: relative;
  }

  .bundle-option-read-more {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    cursor: pointer;
  }

  .bundle-option-read-more span {
    position: absolute;
    right: 8px;
    bottom: 8px;
    height: 24px;
    width: 24px;
  }

  .bundle-option-content {
    padding: 16px 0 0 0;
  }

  .add-to-stl {
    height: auto;
    padding: 0;
  }

  .gs-qty-control .control {
    border: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 4px;
    height: initial;
  }

  .gs-qty-control {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
  }

  .qtyminus {
    padding: 7px;
    background-color: var(--green-mint);
    border-radius: 4px;
    border: none;
    height: 30px;
    width: 30px;
  }

  .qtyplus,
  .add-to-stl label {
    padding: 7px;
    background-color: var(--green-light);
    border-radius: 4px;
    border: none;
    height: 30px;
    width: 30px;
  }

  .gs-qty-input.qty {
    border-radius: 4px;
    border: 1px solid var(--gray-light);
    background: #FFF;
    height: 30px;
    width: 30px;
  }

  .subscription-content-info-wrapper {
    margin-bottom: 24px;
  }

  .bundle-item-weight {
    font-family: "Roboto Condensed", Arial;
    font-size: 18px;
    font-style: normal;
    line-height: 130%;
  }

  .bundle-disabled:not(.selected-bundle) .bundle-summary-plus,
  .bundle-disabled:not(.selected-bundle) .bundle-item-weight,
  .bundle-disabled:not(.selected-bundle) .bundle-option-body,
  .bundle-disabled:not(.selected-bundle) .bundle-option-qty {
    opacity: 0.5;

    label {
      background-color: var(--gray);
    }
  }

  .bundle-options-container {
    margin-top: 24px;
  }

  @media (min-width: 770px) {
    .qtyminus,
    .qtyplus,
    .add-to-stl label,
    .gs-qty-input.qty,
    .gs-qty-input.gs-summary-qty {
      height: 35px;
      width: 35px;
    }

    .bundle-options-wrapper .nested.options-list {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
    }
  }
  
  @media (min-width: 1025px) {
    .fieldset-bundle-options {
      margin-top: 32px;
    }

    .bundle-options-container {
      grid-column: span 2;
      margin-top: 32px;
    }
    
    .bundle-options-wrapper .nested.options-list {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .subscription-content-info-wrapper {
      margin-bottom: 32px;
    }

    .bundle-option-card {
      padding: 16px;
    }
  }
}

/* My account - STL choose products */
#html-body.account #maincontent {
  .bundle-summary-addto-container {
    flex-wrap: nowrap;
    height: 104px;
    padding: 16px;
  }

  .bundle-calculator-wrapper .meter {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .bundle-calculator-wrapper .text {
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    width: fit-content;
    white-space: nowrap;
  }
  
  @media (min-width: 770px) {
    .bundle-summary-addto-container {
      height: auto;
      padding: 24px;
    }

    .bundle-calculator-wrapper .text {
      position: static;
    }

    .bundle-calculator-wrapper .meter {
      flex-direction: row;
      align-items: center;
      gap: 16px;
    }
  }
}

/* STL pick delivery date */
#html-body.stl-product-page {
  .select_interval_wrp {
    padding: 0;
  }

  .box-tocart {
    padding: 0;
  }

  .select_interval_back {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    width: fit-content;
    cursor: pointer;
  }

  .select_interval_back span {
    font-family: "Roboto Condensed";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: 0.36px;
    color: var(--green-light);
  }

  .select_interval_back::before {
    content: '';
    display: block;
    height: 24px;
    width: 24px;
    background-image: url(../images/arrow-left-green.svg);
    background-repeat: no-repeat;
    background-position: contain;
  }

  .price_qty_outer {
    display: none;
  }

  @media (min-width: 1025px) {
    .delivery_main_outer {
      padding-top: 32px;
    }
  }
}


/* Product summary modal of STL */
#html-body {
  .bundle-summary-modal,
  .gs-bundle-summary {
    bottom: 104px;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--gray-light);

    + .modals-overlay {
      margin-bottom: 120px;
    }

    .modal-header .action-close {
      padding: 24px;
    }

    .modal-inner-wrap {
      max-height: 500px;
      overflow-y: scroll;
    }

    .modal-inner-wrap::-webkit-scrollbar {
      display: none;
    }

    .bundle-summary-top-hide {
      width: 100%;
      background: var(--purple-light);
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-align: left;
      padding: 16px;
      margin-top: 8px;
      margin-bottom: 16px;
    }

    .bundle-summary-top-empty {
      font-family: var(--roboto);
      font-size: 18px;
      font-weight: 600;
      line-height: 130%;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .bundle-summary-top-empty::before {
      content: "";
      display: block;
      background: url('../images/info-deep-purple-16px.svg') no-repeat;
      height: 16px;
      width: 16px;
      background-size: cover;
    }

    .selected-product-info {
      justify-self: start;
    }

    .bundle.items {
      margin: 0;
    }
    
    .bundle-totals {
      margin-top: 32px;
      margin-bottom: 8px;
    }
    
    .gs-bundle-summary-bottom .shipping {
      margin-bottom: 8px;
      /* include .preamble() */
      font-family: "Roboto Condensed";
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 140%;
      text-decoration: none;
      letter-spacing: 0.36px;
    }

    .table.bundle-total-weight div {
      font-family: "Roboto Condensed";
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 140%;
      text-decoration: none;
      letter-spacing: 0.36px;
    }

    .bundle-summary-container {
      padding: 0;
      gap: 0;
    }

    .gs-bundle-summary-total-right {
      + .shipping {
        text-align: left;
      }
      
      .price {
        font-family: "Roboto Condensed";
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 130%;
      }
    }
  }

  .bundle-total-weight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* include .preamble() */
    font-family: "Roboto Condensed";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    text-decoration: none;
    letter-spacing: 0.36px;
  }

  .gs-bundle-summary {
    padding: 16px;
    border: none;
    margin-top: 32px;
    bottom: unset;

    .bundle-summary-container {
      gap: 0;
    }

    .bundle-info {
      display: none;
    }
  }

  .bundle-summary-container .table .row {
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-light);
    align-items: center;
  }

  .bundle-summary-top.row.header div {
    font-family: "Roboto Condensed", Arial;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    text-decoration: none;
  }

  .gs-bundle-summary-bottom {
    padding: 0;
    
    .shipping {
      grid-column: span 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .bundle-summary-addto-container {
    background-color: var(--white);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100vw;
    padding: 8px 16px;

    button {
      width: 100%;
    }
  }

  .modals-wrapper .bundle-summary-addto-container {
    display: none;
  }

  .bundle-summary-modal .modal-content {
    margin-bottom: 0;
  }

  .subscription-save-modal,
  .modal-popup.confirm {
    margin-left: 0 !important;
  }

  @media (min-width: 770px) {
    .bundle-summary-addto-container {
      flex-wrap: nowrap;
      gap: 16px;
      padding: 24px;
  
      button {
        width: fit-content;
      }
    }

    .bundle-summary-modal {
      bottom: 89px;

      + .modals-overlay {
        margin-bottom: 89px;
      }

      .modal-inner-wrap {
        border-radius: 16px 16px 0 0;
        max-height: 800px;
      }
    }
  }
  
  @media (min-width: 1025px) {
    #bundle-summary .summary-minus,
    #bundle-summary .summary-plus,
    #bundle-summary .gs-summary-qty {
      height: 35px;
      width: 35px;
    }

    .bundle-summary-modal {
      max-width: 800px;
      left: unset;
      right: 5%;
      width: 100%;

      .gs-bundle-summary-total-right .price {
        font-size: 28px;
      }
    }

    .gs-bundle-summary {
      padding: 48px;
    }

  }
}