// GENERAL LAYOUT
.row {
  .columns {
    padding-top: 0em;
    padding-bottom: 0em;
    line-height: 1.1;
  }
}

.shop-variants {
  // product-thumb width + 1rem
  padding-left: calc(22.222% + 1rem);

  @include breakpoint(phablet) {
    padding-left: 0;
    clear: left;
  }
}

// ROW VARIANTS
.row.variants {
  margin: 0 0 1em 0;

  &.out-of-stock {
    opacity: 0.2;
  }

  .variant-name,
  .total-price {
    padding-top: .74em;
  }
  .variant-price {
    padding-top: .65em;
  }

  // Variant name
  .variant-name {
    padding-left: 0;
    padding-right: 0;

    @include breakpoint(phablet) {
      padding-left: 0.5rem;
    }

    & > *:nth-child(n + 2) {
      color: $grey-550;
      font-size: 0.875rem;
      font-style: italic;
      line-height: normal;
    }
  }

  // Variant price
  .variant-price {
    white-space: nowrap;
    @include breakpoint(phablet) {
      padding-left: 1rem;
    }
  }

  .variant-unit-price {
    color: $grey-700;
    font-size: 0.85rem;
    margin-top: 15px;
    position: relative;
    left: -1px;
  }

  // Total price
  .total-price {
    padding-left: 0rem;
    color: $disabled-med;

    .filled {
      color: $med-drk-grey;
    }

    @include breakpoint(phablet) {
      display: none;
    }
  }
}

// ROW SUMMARY
.summary {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1.25em;
  background: #fff;

  .columns {
    padding-top: 1em;
    padding-bottom: 1em;
    line-height: 1;

    @include breakpoint(tablet) {
      padding-top: 0.65rem;
      padding-bottom: 0.65rem;
    }
  }

  .summary-header {
    // product-thumb width + 1rem
    padding-left: calc(22.222% + 1rem);
    padding-right: 1rem;

    @include breakpoint(phablet) {
      padding-left: calc(33.333% + 1rem);
    }

    .product-producer {
      color: $grey-550;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-style: italic;

      a {
        color: $teal-500;

        &:hover, &:focus, &:active {
          color: $teal-600;
          text-decoration: underline;
        }
      }
    }

    h3 {
      font-size: 1.3rem;
      margin-top: 0.75rem;
      margin-bottom: 0.6rem;
    }

    h3 a {
      color: $orange-500;

      &:hover, &:focus, &:active {
        color: $orange-600;
        text-decoration: underline;
      }
    }

    .product-description {
      margin-bottom: 0.75rem;
      cursor: pointer;
      // Force product description to be on one line
      // and truncate with ellipsis
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden; 
      white-space: nowrap;
      // line-clamp is not supported in Safari
      // Trick to get overflow: hidden to work in old Safari
      line-height: 1rem;
      height: 1.75rem;

      // Force truncation with ellipsis on all the children
      * {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      > div {
        margin-bottom: 1.5rem; // Equivalent to p (trix doesn't use p as separator by default, so emulate div as p to be backward compatible)
      }

      @include trix-styles;
    }

    .product-properties {
      margin: .5em 0;

      li {
        margin: 0 0.25rem 0.25rem 0;

        a {
          padding: 0.1em 0.625em;

          cursor: auto;

          &.has-tip {
            cursor: pointer;
            font-weight: normal;
          }
          &:hover, &:focus {
            border-color: #ccc;
          }
        }

        // Foundation doesn't show the nub on mobile.
        // Repeating the style to show it here.
        .nub {
          border-color: transparent transparent #333333 transparent;
        }
      }
    }
  }
}
