/* Pagebuilder defaults */
#html-body {
  [data-content-type="text"],
  [data-content-type="heading"],
  [data-content-type="row"] {
    margin-bottom: 16px;
  }

  [data-content-type="image"] img {
    width: 100%;
  }

  [data-content-type="text"] ul {
    list-style-type: disc;
    margin-left: 24px;
  }

  [data-content-type="text"] ol {
    list-style-type: auto;
    margin-left: 24px;
  }
}

/* Custom buttons */
#html-body {
  .icon-buttons[data-content-type="buttons"] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: column;
  }

  .icon-buttons [data-content-type="button-item"] {
    width: 100%;
  }
  
  .button-meat a,
  .button-pan a,
  .button-beef a,
  .button-pork a,
  .button-chicken a,
  .button-lamb a,
  .button-chef a,
  .button-cutting a,
  .button-grill a {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    text-align: left;
    font-size: 18px;

    &:before {
      background-repeat: no-repeat;
      background-size: contain;
      display: block;
      content: '';
      height: 24px;
      width: 24px;
    }

    &:after {
      display: block;
      content: '';
      height: 24px;
      width: 24px;
      background-image: url('../images/arrow-forward-outline-white.svg');
      background-repeat: no-repeat;
      background-size: contain;
    }
  }

  .button-chef a::before {
    background-image: url('../images/chefs-hat-lime.svg');
  }
  
  .button-cutting a::before {
    background-image: url('../images/cutting-board-lime.svg');
  }

  .button-grill a::before {
    background-image: url('../images/grill-lime.svg');
  }

  .button-meat a::before {
    background-image: url('../images/meat-lime.svg');
  }

  .button-pan a::before {
    background-image: url('../images/pan-lime.svg');
  }

  .button-beef a::before {
    background-image: url('../images/beef-lime.svg');
  }

  .button-pork a::before {
    background-image: url('../images/pork-lime.svg');
  }

  .button-chicken a::before {
    background-image: url('../images/chicken-lime.svg');
  }

  .button-lamb a::before {
    background-image: url('../images/lamb-lime.svg');
  }

  [data-content-type="text"] a {
    color: var(--green-light);
  }
  
  @media (min-width: 1025px) {
    .icon-buttons[data-content-type="buttons"] {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
    }
  }
}

/* Hero */
#html-body {
  .hero {
    h1,
    h2,
    h3,
    h4,
    h5,
    p,
    span {
      color: inherit;
    }

    h1,
    h2,
    h2,
    h3,
    h4,
    h5,
    .preamble > * {
      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    }

    .icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .icon::before {
      height: 32px;
      width: 32px;
      content: '';
      display: block;
      background-image: url(../images/wheat-white.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      flex-shrink: 0;
    }

    .icons {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }

    .icons::before {
      height: 32px;
      width: 32px;
      content: '';
      display: block;
      background-image: url(../images/wheat-white.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      flex-shrink: 0;
    }

    .icons::after {
      height: 32px;
      width: 32px;
      content: '';
      display: block;
      background-image: url(../images/wheat-white.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      flex-shrink: 0;
    }
  }

  .hero {
    position: relative;
    color: var(--white);
    z-index: 1;
  }

  .hero::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%), rgba(0,0,0,0.2);
    z-index: -1;
  }

  @media (min-width: 1025px) {
    .hero .icon::before {
      height: 64px;
      width: 64px;
    }
  }
}

/* Blocks */
#html-body {
  .fifty-fifty [data-content-type="image"],
  .fifty-fifty [data-content-type="image"] img,
  .fifty-fifty-reverse [data-content-type="image"],
  .fifty-fifty-reverse [data-content-type="image"] img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }

  .fifty-fifty [data-content-type="buttons"],
  .fifty-fifty-reverse [data-content-type="buttons"] {
    flex-direction: row;
  }

  .fifty-fifty [data-content-type="button-item"],
  .fifty-fifty-reverse [data-content-type="button-item"] {
    flex-grow: unset;
    width: unset;
  }

  .pagebuilder-column.fifty-fifty-text {
    padding: 24px;
  }

  .fifty-fifty-reverse .pagebuilder-column:first-of-type {
    order: 2;
  }

  .pagebuilder-column-line {
    gap: 16px;
  }

  .fifty-fifty-reverse .pagebuilder-column-line,
  .fifty-fifty .pagebuilder-column-line {
    gap: 0px;
  }

  .quote {
    border-left: 6px solid var(--sand-dark);
    padding: 16px 32px;

    p {
      font-family: var(--roboto);
      font-size: 18px;
      font-style: normal;
      line-height: 130%
    }
  }

  blockquote {
    font-family: var(--georgia);
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    line-height: 140%;
    margin-bottom: 16px;
  }

  .ui-tabs {
    max-width: calc(100vw - 32px);
    overflow: hidden;
  }

  .tabs-navigation {
    display: flex;
    flex-wrap: wrap-reverse;
    column-gap: 4px;
  }

  .tab-header {
    background: var(--sand);
    color: var(--earth-dark);
    border: none;
    display: inline-flex;
    border-radius: 4px 4px 0 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease;
    height: fit-content;
    width: fit-content;
    text-transform: none;
    appearance: none;
    -webkit-appearance: none;
  }

  .tabs-content {
    background: var(--white);
    border: none;
    padding: 16px;
    overflow: auto;
  }

  .ui-tabs-anchor {
    font-family: var(--roboto);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: 0.36px;
    padding: 12px 24px;
  }

  .tab-header.ui-state-active {
    background: var(--white);
    color: var(--green-light);
    box-shadow: 0 -4px 4px 0 #F1F1F1;
  }

  .pagebuilder-column .products-grid .widget-product-grid {
    grid-template-columns: 1fr;
  }

  .pagebuilder-column .first-li .product-item-info {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pagebuilder-column .first-li .product-item-details-center {
    padding: 24px;
  }

  @media (min-width: 770px) {
    .fifty-fifty-reverse .pagebuilder-column:first-of-type {
      order: unset;
    }
  }

  @media (min-width: 1025px) {
    .hero .icons::before {
      height: 64px;
      width: 64px;
    }

    .hero .icons::after {
      height: 64px;
      width: 64px;
    }

    blockquote {
      font-size: 26px;
    }

    .pagebuilder-column.fifty-fifty-text {
      padding: 48px;
    }

    .tabs-navigation {
      column-gap: 8px;
    }

    .ui-tabs-anchor {
      padding: 16px 32px;
      font-size: 18px;
    }

    .tabs-content {
      padding: 24px;
    }

    .pagebuilder-column .first-li .product-item-details-center {
      padding: 32px;
    }
  }
}