/* Size layout: blocks */
.product-variant__size__pills-wrapper[data-size-layout="blocks"] {
  .size-options-blocks {
    .product-variant-option-slot {
      display: contents;
    }

    .purchase-choice-radio:not(:checked) + .product-variant-option-slot .p_badge.on_sale {
      background: transparent;
      border-color: #FF7A24;
      color: #FF7A24;
    }

    > .accordion__item__body-content {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 15px 7px;
      align-items: stretch;
      padding-top: 0;
    }

    &:not(:has(.product-variant-option-slot:is(:not(.is-ab-hidden), .is-ab-visible) ~ .product-variant-option-slot:is(:not(.is-ab-hidden), .is-ab-visible))) > .accordion__item__body-content {
      grid-template-columns: minmax(0, 1fr);
    }

    label.product-variant-options-size {
      display: contents !important;
      padding: 0;
      border: 0;
      background: transparent;

      &::before {
        display: none;
      }
    }

    .product-variant-option-card {
      grid-row: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-width: 0;
      height: 100%;
      padding: 18px 6px 12px;
      border: 1px solid #D8D5D0;
      border-radius: 8px;
      background: transparent;
      text-align: center;
      cursor: pointer;
    }

    .purchase-choice-radio:checked + .product-variant-option-slot .product-variant-option-card,
    label.is-active .product-variant-option-card {
      border-color: #A067FF;
      background: #FAF7FF;
    }

    &:not([data-purchase-layout="tabs"]) {
      .product-variant-item-head__inner,
      .product-variant__head {
        grid-column: 1 / -1;
        grid-row: 1;
      }

      .product-variant-option-card {
        grid-row: 2;
      }
    }

    .product-variant-options-badge-wrapper {
      top: 0;
      right: auto;
      left: 50%;
      transform: translate(-50%, -50%);
      width: max-content;
    }

    .product-variant-options-body,
    .product-variant-options-content__wrapper,
    .product-variant-options__wrapper,
    .product-variant-options__inner,
    .product-variant-options__inner-info,
    .product-variant-options--wrapper,
    .product-variant-option-name-row,
    .product-variant-options__price-container,
    .product-variant-options-price-container__inner {
      display: contents !important;
    }

    .product-variant-option-radio-button {
      order: 1;
      margin: auto;
    }
    .product-variant-option-type {
      order: 1;
      text-align: center;
    }
    .product-variant-option-name {
      order: 2;
    }

    .product-variant-option-card__sale {
      order: 6;
    }

    .product-variant-option-image {
      display: none;
    }

    .product-variant-options-size,
    .product-variant-options-size.product-variant-options-has-badge {
      margin-top: 0;
    }

    .product-variant-option-card__sale {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: auto;

      .p_badge.on_sale {
        position: static;
        margin: 0;
        border: 1px solid transparent;
        font-size: 12px;
        font-weight: 600;
        line-height: 14px;
        text-transform: none;
      }
    }

    .purchase-choice-radio:checked + .product-variant-option-slot > .product-subscription__body,
    .product-variant-options.is-active .product-subscription__body,
    .product-variant-options.is-active + .product-subscription__body {
      grid-column: 1 / -1;
      grid-row: 2;
      align-self: start;
      width: auto;
      height: auto;
      margin: 0;
      padding: 16px;
      border: 1px solid #a067ff;
      border-radius: 8px;
      background: #FAF7FF;
    }

    .product-subscription__benefit-list,
    .product-subscription__gift-list {
      height: auto;
    }

    .product-subscription__gift-list {
      width: 100%;
      margin-top: 16px;
      box-sizing: border-box;
    }

    .product-subscription__gift-item {
      width: 100%;
    }

    &:not([data-purchase-layout="tabs"]) {
      .purchase-choice-radio:checked + .product-variant-option-slot > .product-subscription__body,
      .product-variant-options.is-active .product-subscription__body,
      .product-variant-options.is-active + .product-subscription__body {
        grid-row: 3;
      }
    }

    .product-subscription__body:before {
      display: none;
    }

    &:not(:has(.product-variant-option-slot:is(:not(.is-ab-hidden), .is-ab-visible) ~ .product-variant-option-slot:is(:not(.is-ab-hidden), .is-ab-visible))) {
      .product-variant-option-slot {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        min-width: 0;
        margin-top: 16px;
        gap: 15px;
        box-sizing: border-box;

        > .product-variant-options {
          order: 0;
        }

        > .product-subscription__body {
          order: 1;
          margin: 0;
        }
      }

      label.product-variant-options-size {
        display: flex !important;
        flex-direction: column;
        align-self: stretch;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 14px;
        border: 1px solid #d8d5d0;
        border-radius: 8px;
        background: transparent;
        text-align: left;
        transition: none;

        &::before {
          display: block;
          transition: none;
        }
      }

      .purchase-choice-radio:checked + .product-variant-option-slot > label.product-variant-options-size,
      label.product-variant-options-size.is-active {
        background: #faf7ff;
        border-color: #9F5BFF;

        &::before {
          display: none;
        }
      }

      .purchase-choice-radio:checked + .product-variant-option-slot > .product-subscription__body,
      .product-variant-options.is-active .product-subscription__body,
      .product-variant-options.is-active + .product-subscription__body {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
        box-sizing: border-box;
      }

      .product-variant-option-card__sale {
        display: none !important;
      }

      .product-variant-option-card {
        display: contents;
        height: auto;
        padding: 0;
        border: 0;
        background: transparent;
        gap: 0;
        text-align: left;
      }

      .product-variant-options-body,
      .product-variant-options-content__wrapper,
      .product-variant-options__wrapper,
      .product-variant-options__inner,
      .product-variant-options__inner-info,
      .product-variant-options--wrapper,
      .product-variant-option-name-row,
      .product-variant-options__price-container,
      .product-variant-options-price-container__inner {
        display: flex !important;
      }

      .product-variant-options-badge-wrapper {
        top: -15px;
        right: 8px;
        left: auto;
        width: fit-content;
        transform: none;
      }

      .product-variant-option-radio-button {
        order: 0;
        margin: 0;
      }

      .product-variant-option-image {
        display: block;
      }

      .product-variant-option-name,
      .product-variant-options__price,
      .product-variant-options__price-per-portion,
      .poduct-variant-options__price-per-kg {
        order: 0;
        width: auto;
      }
    }
  }
}

.product-variant__select__options {
  .product-variant__size__pills-wrapper[data-size-layout="blocks"] {
    .size-options-blocks:has(.product-variant-option-slot:is(:not(.is-ab-hidden), .is-ab-visible) ~ .product-variant-option-slot:is(:not(.is-ab-hidden), .is-ab-visible)) {
      .product-variant-option-name-row .p_badge.on_sale {
        display: none !important;
      }

      .product-variant-options__price-per-portion {
        order: 3;
        display: block;
        width: 100%;
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.1;
        text-align: center;
        margin-top: -3px;
      }

      .product-variant-options__price {
        order: 5;
        align-items: center;
        justify-content: center;
        line-height: 1.1;
        min-width: 35px;
      }

      .product-variant-options-price-container__inner.reverse .product-variant-options__price {
        order: 3;
        font-size: 14px;
        font-weight: 700;
      }

      .product-variant-options-price-container__inner.reverse .product-variant-options__price .price {
        font-size: 14px;
        font-weight: 700;
      }

      .product-variant-options-price-container__inner.reverse .product-variant-options__price-per-portion {
        order: 5;
        font-size: 10px;
        font-weight: 400;
      }

      .product-variant-options__price-container:has(.reverse) .poduct-variant-options__price-per-kg {
        order: 6;
      }
      .product-variant-options__price .compare-price {
        color: #131313;
      }
      .poduct-variant-options__price-per-kg {
        order: 4;
        display: block;
        width: 100%;
        margin-left: 0;
        color: #888;
        font-size: 10px;
        line-height: 1;
        text-align: center;
      }
    
      .product-variant-option-name {
        background: transparent;
        padding: 0;
        min-width: 0;
        width: 100%;
        border-radius: 0;
        font-weight: 700;
        font-size: 14px;
        text-align: center;
      }

      @media screen and (max-width: 767px) {
        .p_badge {
          font-size: 10px!important;
          padding: 4px 5px;
        }
        .product-variant-options__price .compare-price {
          font-size: 10px!important;
        }
        .poduct-variant-options__price-per-kg {
          font-size: 8px!important;
        }
        .product-variant-options__price,
        .product-variant-options__price .price {
          font-size: 12px;
        }
      }

      @media screen and (max-width: 370px) {
        .product-variant-option-name,
        .product-variant-option-type,
        .product-variant-options__price-per-portion {
          font-size: 12px!important;
        }
      }
    }
  }
}