// Can this be deleted?

//
// Product lists
// --------------------------------------------------

// .product-list-container    - wrapper class for providing an appropriate bg.
// .product-list              - parent container for the items.
// .product-item              - the product item itself.
// .product-inner             - inner container for spacing and alignment.
// .product-option            - 'selectable' product option (applied to .product-inner).
// .product-sub-option        - 'selectable' product sub-option (applied to .product-inner).
// .product-banner            - up-sell/cross-sell banners (applied to .product-inner).
// .product-col               - base class for a 'column' of content inside .product-inner.
// .product-thumb             - column for product thumbnail images.
// .product-icon              - similar to .product-thumb but for use with icons.
// .product-body              - main body of product content (title and description etc.).
// .product-footer            - last column for prices and CTAs
// .product-prices            - prices and often other supporting content (on mobile) or CTAs.
// .product-actions           - CTAs for product item - often hidden on mobile


// The container for the list (to set the appropriate background color)
// NOTE: These colors are based on using .bg-default on the items. It
// is also possible to use other bg-variants on product-list-items and
// their containers - in which case, these classes can be omitted altogether.
.product-list-container {
  background-color: @product-list-bg;
}
@media (min-width: @screen-sm-min) {
  .product-list-divided-container {
    background-color: @product-list-divided-bg;
  }
  .product-list-panels-grid-container {
    background-color: @product-list-panels-grid-bg;
  }
}

// Namespace for product-list mixins
#product-list {

  // Dividers between product items and options (mobile and product-list-divided)
  .product-border() {

    .product-item {
      border-width: 1px 0px;
      border-style: solid;
      border-color: @product-border-color;
      background-clip: padding-box;

      &.product-banner {
        border-width: 0;
      }
    }
  }
}

// The parent container for the items - base class for all product list variations
.product-list {
  // Local variables - DO NOT MODIFY
  //** Calculate item content offset on mobile
  @product-inner-offset: percentage((@product-thumb-col / (@product-thumb-col + 100)));

  // No gutters on mobile
  @media (max-width: @screen-xs-max) {
    .row;
  }

  // Inner container for spacing and alignment
  .product-inner {

    @media (min-width: @screen-sm-min) {
      // Weird Safari and IE bug fix to make full height cell content
      height: 1px;

      // Remove clearfix when using CSS table to avoid weird cell behaviour.
      &:after,
      &:before {
        content: none;
      }
    }

    // :active styling on mobile - toggled with JS
    @media (max-width: @screen-xs-max) {
      .transition(opacity .3s ease-out);
      &.active {
        .opacity(.65);
        .transition(none);
      }
    }
  }

  .product-option .product-inner.panel-body {
    border-top-width: 0; // Remove top borders (just Hunter and HX?)
  }

  // Product list > product items
  .product-item + .product-item {
    margin-top: @product-padding;
  }
  // Product list > product banners
  .product-banner + .product-item,
  .product-item + .product-banner {
    margin-top: @product-padding*2;
    @media (min-width: @screen-sm-min) {
      margin-top: @product-padding-sm*2; // Extra space around banners
    }
  }

  // A 'selectable' product option
  .product-option {
    // The primary option for any product (i.e. the first option)
    &:first-child {
      // Inner offset to prevent content wrapping around thumb (mobile only)
      padding-left: @product-inner-offset;

      @media (max-width: @screen-xs-max) {
        .clearfix; // Clear floating thumb on mobile
      }
    }

    @media (min-width: @screen-sm-min) {
      // Indent sub-options
      + .product-option {
        margin-left: @product-thumb-col-sm;
      }
    }
  }

  .product-option + .product-option {
    border-top: 1px solid;
    .opacify(border-top-color, @product-border-color, @bg-default);
    margin-top: -1px;
  }

  // Banner for up-selling or cross-selling etc.
  .product-banner {

    // More padding for banners on mobile
    .panel-body {
      padding: @product-padding;
    }

    @media (max-width: @screen-xs-max) {
      // Higher specificity
      &.product-item {
        .center-block;
        max-width: (@screen-xs-max * .7);
        padding-left: @grid-gutter-width/2;
        padding-right: @grid-gutter-width/2;
      }
    }
  }


  // Product columns
  // ===============

  // Product content 'columns' - e.g. thumb, body, footer
  .product-col {
    padding: @product-padding;

    @media (min-width: @screen-sm-min) {
      height: 100%; // Full-height table-cells for IE
      padding: @product-padding-sm;
    }
  }

  // Product thumbnail column
  .product-thumb {
    width: @product-thumb-col;

    // The thumbnail itself
    .thumb-container {
      // Shorter variable mapping for more readable mixins
      @xs:  percentage(@product-thumb-aspect-ratio);
      @sm:  percentage(@product-thumb-aspect-ratio-sm);
      @md:  percentage(@product-thumb-aspect-ratio-md);
      @lg:  percentage(@product-thumb-aspect-ratio-lg);

      padding-bottom: @xs; // 1:1 aspect ratio

      @media (min-width: @screen-sm-min) {
        & when not (@sm = @xs) {
          padding-bottom: @sm;
        }
      }

      @media (min-width: @screen-md-min) {
        & when not (@md = @sm) {
          padding-bottom: @md;
        }
      }

      @media (min-width: @screen-lg-min) {
        & when not (@lg = @md) {
          padding-bottom: @lg;
        }
      }

      // Centered placeholder icon
      > .fa {
        top: 50%;
        left: 50%;
        width: 1.5em;
        margin-top: -.5em;
        margin-left: -.75em;
        text-align: center;
      }
    }

    // When you need to stretch the thumb to the height of content
    // Apply to .product-thumb
    &.product-thumb-fill {
      @media (min-width: @screen-sm-min) {
        > *,
        .thumb-container {
          height: 100%;
        }
        .thumb-container {
          margin-right: -1px; // Align with edge of sub-option
        }
        &.p-sm-0 .thumb-container {
          .border-right-radius(0);
        }
      }
    }
  }

  // Product thumbnail and icon columns
  // - Product icon column for options with no thumbnail - i.e. 'Advanced rate' options
  .product-icon,
  .product-thumb {
    @media (min-width: @screen-sm-min) {
      width: @product-thumb-col-sm;
    }
  }
  .product-banner,
  .product-sub-option {
    .product-icon:not(.product-thumb) {
      width: auto;
    }
  }

  .product-thumb,
  .product-footnote {
    // Offset thumb and footnote to left edge of product item on mobile
    margin-left: -@product-thumb-col;
  }

  // Redefine thumb height to smallest available aspect ratio
  .product-banner .product-thumb .thumb-container {
    @media (max-width: @screen-xs-max) {
      padding-bottom: min(percentage(@product-thumb-aspect-ratio-sm), percentage(@product-thumb-aspect-ratio-md));
    }
  }

  // Limit the max width of the product thumbnail column on mobile
  @media (min-width: (@product-thumb-max-width * (100/@product-inner-offset))) and (max-width: @screen-xs-max) {
    .product-thumb {
      width: @product-thumb-max-width;
    }

    .product-thumb,
    .product-footnote {
      margin-left: -@product-thumb-max-width;
    }

    .product-option:first-child {
      padding-left: @product-thumb-max-width;
    }
  }

  // Product body column for main content - e.g. title and description
  .product-body {
    @media (min-width: @screen-sm-min) {
      padding-right: @product-padding;
    }
    @media (min-width: @screen-md-min) {
      padding-left: @product-padding-sm + @product-padding;
    }
  }

  // Product footer column for prices and CTAs
  .product-footer {
    clear: right; // Prevent wrapping under wishlist heart

    @media (min-width: @screen-sm-min) {
      width: @product-footer-col-sm;

      > .media {
        height: 100%;
      }
    }
    @media (min-width: @screen-md-min) {
      width: @product-footer-col-md;
    }
  }

  .product-prices,
  .product-actions {
    // TODO: calculate breakpoint based on available space and if 4-column or not
    // NOTE: should only be stacked for first product-option
    @media (min-width: @screen-sm-min) {
      display: block;
      width: auto;
      height: auto;
    }
  }
  @media (min-width: @screen-sm-min) {
    .product-prices + .product-actions {
      margin-top: ceil(-@product-padding-sm - @product-padding-sm/2);
    }
  }

  @media (max-width: @screen-xs-max) {
    // Remove background color (in case bg-variants are used)
    .product-footer,
    .product-prices,
    .product-actions {
      background: none;
    }
  }

  // Indented sub-options
  .product-sub-option {
    //** Calculate scale factor for columns in indented product options (tablet and above)
    @multiplier: (100/(100 - unit(@product-thumb-col-sm)));

    .product-footer {
      @media (min-width: @screen-sm-min) {
        width: (@multiplier * @product-footer-col-sm);
      }
      @media (min-width: @screen-md-min) {
        width: (@multiplier * @product-footer-col-md);
      }
    }
  }

  // Remove extra padding between thumb and body
  .product-option {
    .product-icon,
    .product-thumb {
      padding-right: 0;
    }
  }

  // Tighten up vertical space on mobile
  .product-option:first-child .product-prices {
    @media (max-width: @screen-xs-max) {
      padding-top: 0;
    }
  }

  .product-banner {
    @media (max-width: @screen-xs-max) {
      .product-icon {
        padding-top: @product-padding*2;
        padding-bottom: @product-padding*2;
      }
      .product-col {
        width: auto;
        display: block;
      }
    }
  }


  // Product content
  // ===============

  .media,
  .media-body {
    overflow: visible; // Undo the IE table-cell hack (not supported)
  }

  // Heart icons for adding saving products to a 'wishlist' / 'favourites'
  .product-item-wishlist {
    top: 0;
    padding: @product-padding;
    z-index: 1;
    position: relative;

    @media (max-width: @screen-xs-max) {
      padding-bottom: 0;

      .fa-heart {
        color: transparent;
      }
      .fa-heart-o {
        color: inherit;
      }
      &.active .fa {
        .text-danger;
      }
    }

    @media (min-width: @screen-sm-min) {
      position: absolute;
      top: @product-padding;
      left: @product-padding;

      .fa-heart-o {
        color: @color-white;
      }
    }
  }

  // Reset margins on some paragraphs and lists
  .product-description,
  .product-features {
    &:last-child {
      margin-bottom: 0;
    }
  }

  // Product summary description (mobile only)
  .product-description {
    margin-top: .5em;

    @media (min-width: @screen-md-min) {
      margin-top: 1em;
    }
  }

  // List of product features with accompanying icons (e.g. 'checkmark' or 'plus' icons)
  .product-features {
    margin-top: @product-padding;

    > li {
      padding-top: .5em; // Space between items
    }

    p {
      margin-bottom: 0; // overwriting any additional tags provided by CMS
    }

    @media (max-width: @screen-xs-max) {
      margin-top: 0;

      > li {
        padding-bottom: 0;

        > .media-left {
          padding-right: @padding-xs-horizontal;
        }
      }
    }
  }

  .product-item-wishlist ~ .product-body .product-features {
    clear: right;
  }

  // Logo roundels for product-list-panels-grid tiles
  .product-logo {
    overflow: hidden;
    border-radius: 50%;

    > div {
      width: @product-logo-size - (@thumbnail-padding*2);
      height: @product-logo-size - (@thumbnail-padding*2);
    }
  }

  // Product stars container (for hotel star ratings)
  .stars {
    color: @product-stars-color;

    .fa {
      line-height: 1.5em;

      + .fa {
        margin-left: .15em; // Space out stars
      }
    }
  }
  // Stars beneath product title
  .product-title + .stars {
    margin-top: ceil(@font-size-base/4);
  }
  // Stars overlaid on a product thumbnail
  .product-thumb .stars {
    bottom: 0;
    left: 0;
    right: 0;
    padding: floor(@font-size-base/4) 0;
    #gradient > .vertical(fade(@color-black, 0%), fade(@color-black, 80%));

    @media (min-width: @screen-sm-min) {
      padding-top: @font-size-base;
      padding-left: floor(@font-size-base/2);
      padding-right: floor(@font-size-base/2);
    }
  }

  // Product title heading
  .product-title {
    margin-top: 0;

    a {
      color: inherit; // Remove link colour
    }
  }
  .product-option .product-title {
    @media (max-width: @screen-xs-max) {
      font-size: @font-size-h4;
    }
  }

  // Total price (i.e. final price after all discount etc.)
  .product-price-total {
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0;
  }
  .product-option .product-price-total {
    @media (max-width: @screen-xs-max) {
      font-size: @font-size-h3;
    }
  }

  // Fix spacing between price labels and price
  .label + .product-price-total {
    margin-top: @font-size-base/2;
  }

  // Footnote for supporting information - e.g. "No refunds or amendments"
  .product-footnote {
    display: block;
    height: auto;
    padding: @product-padding;
    clear: both;

    @media (min-width: @screen-sm-min) {
      padding-left: @product-padding-sm;
      padding-right: @product-padding-sm;
    }
  }

  // Product actions - i.e. wrappers for CTA buttons
  * + .product-action {
    margin-top: max(@product-padding, @padding-xs-vertical);
  }
  // Increase the available space for CTA text
  .product-action .btn-block {
    padding-left: @padding-xs-horizontal;
    padding-right: @padding-xs-horizontal;
  }
}


// List styles (extending .product-list)
//##

// NOTE: Markup varies slightly between list styles (see examples in Pattern Library)

// .product-list-secondary    - 4-column (or more) lists for use in full-width containers
// .product-list-divided      - minimal list style with dividers between items
// .product-list-panels       - panel list for more visual 'depth'
// .product-list-small        - compact lists for use in narrower containers
// .product-list-panels-grid  - grid-style layout with tiles (extends .product-list-panels)

// Secondary style for 4-column list item layout - supports .product-list-divided and .product-list-panels
.product-list-secondary {
  //** Calculate scale factor for columns in indented product options (tablet and above)
  @multiplier: (100/(100 - unit(@product-secondary-thumb-col-sm)));

  .product-thumb .thumb-container {
    // Shorter variable mapping for more readable mixins
    @sme: percentage(@product-secondary-thumb-aspect-ratio-sm);
    @mde: percentage(@product-secondary-thumb-aspect-ratio-md);
    @lge: percentage(@product-secondary-thumb-aspect-ratio-lg);

    @media (min-width: @screen-sm-min) {
      & when not (@sme = @product-thumb-aspect-ratio-sm) {
        padding-bottom: @sme;
      }
    }
    @media (min-width: @screen-md-min) {
      & when not (@mde = @product-thumb-aspect-ratio-md) {
        padding-bottom: @mde;
      }
    }
    @media (min-width: @screen-lg-min) {
      & when not (@lge = @product-thumb-aspect-ratio-lg) {
        padding-bottom: @lge;
      }
    }
  }

  @media (min-width: @screen-sm-min) {
    // Indent sub-options
    .product-option + .product-option {
      margin-left: @product-secondary-thumb-col-sm;
    }

    .product-icon,
    .product-thumb {
      width: @product-secondary-thumb-col-sm;
    }

    .product-footer {
      width: @product-secondary-footer-col-sm;

      > .media {
        display: table;
        table-layout: fixed;
        width: 100%;
      }
    }

    .product-sub-option .product-footer {
      width: (@multiplier * @product-secondary-footer-col-sm);
    }

    .product-prices,
    .product-actions {
      display: table-cell;
      width: 50%;
      height: 100%;
    }

    .product-prices + .product-actions {
      margin-top: 0;
    }
  }

  @media (min-width: @screen-md-min) {
    .product-footer {
      width: @product-secondary-footer-col-md;
    }

    // Indented sub-options
    .product-sub-option .product-footer {
      width: (@multiplier * @product-secondary-footer-col-md);
    }
  }
}

// Minimal flat list style
.product-list-divided {
  #product-list .product-border(); // Dividers between product items and options

  @media (min-width: @screen-sm-min) {
    .product-multi-option {
      padding-bottom: @product-padding-sm; // Space below sub-options
    }

    .product-item + .product-item {
      margin-top: -1px;
      border-top-color: transparent;
    }
    .product-banner + .product-item,
    .product-item + .product-banner {
      margin-top: @product-padding-sm*2; // Extra space around banners
    }

    .product-option + .product-option {
      .opacify(background-color, @product-sub-option-bg, @product-list-divided-bg);
      border-radius: @border-radius-base;
      border-top-width: 0;

      + .product-option {
        margin-top: @product-padding; // Space between subsequent sub-options
      }
    }

    // Align thumb with gutter
    .product-option:first-child .product-thumb {
      padding-left: 0;
    }

    // Hearts positioned above thumbs (tablet and above)
    .product-item-wishlist {
      left: 0;
      top: @product-padding-sm;
    }
  }
}

// Panel list style (requires additional panel classes in HTML)
.product-list-panels {

  // Prevent double borders if panels have visible borders
  .product-sub-option.panel {
    border-bottom-width: 0;
    &:last-child {
      border-bottom-width: 1px;
    }
  }

  .product-col {
    &.panel-footer,
    &.panel-body {
      border-top-width: 0;
    }
  }

  @media (max-width: @screen-xs-max) {
    #product-list .product-border(); // Dividers between product items and options (mobile only)

    .product-option.panel {
      // Reset panel appearance
      border-width: 0;
      border-radius: 0;
      .box-shadow(none);

      + .product-option {
        border-top-width: 1px;
      }
    }
  }

  @media (min-width: @screen-sm-min) {
    .product-item + .product-item {
      margin-top: @grid-gutter-width;
    }
    .product-banner + .product-item,
    .product-item + .product-banner {
      margin-top: @product-padding-sm*2; // Extra space around banners
    }

    .product-option + .product-option {
      @bg: mix(fade(@product-panel-sub-option-bg, 100%), fade(@panel-bg, 100%), percentage(alpha(@product-panel-sub-option-bg)));
      .opacify(border-top-color, @product-border-color, @bg);

      &:last-child {
        .border-bottom-radius(@panel-border-radius); // Reapply rounded panel corners to bottom of last panel
      }
    }

    .product-sub-option {
      .opacify(background-color, @product-panel-sub-option-bg, @panel-bg);
      border-radius: 0; // Reset rounded corners
    }

    // Fix corners for multi-option items
    .product-multi-option .product-option.panel:first-child {
      &,
      .product-footer {
        border-bottom-right-radius: 0;
      }

      .product-list-small& {
        .border-bottom-radius(0);
      }
    }

    // Less padding around thumbs in panels
    .product-thumb {
      padding-top: @product-padding;
      padding-left: @product-padding;
      padding-bottom: @product-padding;
    }

    .product-footer {
      .border-right-radius(max(0, @panel-border-radius - 1)); // Follow panel rounded edges
    }

    .product-footnote {
      @bg: mix(fade(@bg-muted, 100%), fade(@panel-bg, 100%), percentage(alpha(@bg-muted)));
      border-top: 1px solid; // Divider between footnote and product
      .opacify(border-top-color, @product-border-color, @bg);
    }
  }
}

// Small product list - supports .product-list-divided and .product-list-panels
.product-list-small {

  .product-thumb .thumb-container {
    padding-bottom: percentage(@product-thumb-aspect-ratio); // Maintain 1:1 aspect ratio
  }

  @media (min-width: @screen-sm-min) {
    .product-option + .product-option {
      margin-left: 0; // Remove indent on sub-options
    }

    .product-thumb,
    .product-icon {
      width: @product-thumb-col-small;
    }

    .product-banner,
    .product-sub-option {
      .product-icon:not(.product-thumb) {
        width: auto;
      }
    }

    .product-footer {
      width: @product-footer-col-small;
    }

    .product-sub-option .product-footer {
      width: @product-footer-col-small * 2;

      > .media {
        display: table;
        table-layout: fixed;
        width: 100%;
      }

      .product-prices,
      .product-actions {
        // TODO: calculate breakpoint based on available space and if 4-column or not
        width: 50%;
        display: table-cell;
      }

      .product-actions {
        margin-top: 0; // Remove negative margin
      }
    }

    .product-sub-option .product-prices {
      // More space for content in narrow containers
      padding-left: 0;
      padding-right: 0;
    }

    .product-option .product-price-total {
      font-size: @font-size-h2-sm;
    }
  }

  @media (min-width: @screen-md-min) {

    .product-body {
      padding-left: @product-padding-sm;
    }

    .product-option .product-price-total {
      font-size: @font-size-h2-md;
    }
  }

  @media (min-width: @screen-lg-min) {
    .product-option .product-price-total {
      font-size: @font-size-h2-lg;
    }
  }
}

// Product grid - extends .product-list-panels
.product-list-panels-grid {

  // Override BS columns if it's not possible to modify the HTML (classes)
  // NOTE: @product-per-row-* variables are undefined by default
  .product-item {
    & when (isnumber(@product-per-row-sm)) {
      .make-sm-column((@grid-columns/@product-per-row-sm), @product-padding-sm);
    }
    & when (isnumber(@product-per-row-md)) {
      .make-md-column((@grid-columns/@product-per-row-md), @product-padding-sm);
    }
    & when (isnumber(@product-per-row-lg)) {
      .make-lg-column((@grid-columns/@product-per-row-lg), @product-padding-sm);
    }

    // Flexbox fallbacks for fixing unequal column heights + wrapping
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      & when (isnumber(@product-per-row-sm)) {
        &:nth-child(@{product-per-row-sm}n+1) {
          clear: both;
        }
      }
      // Default columns = 3
      & when not (isnumber(@product-per-row-sm)) {
        &:nth-child(3n+1) {
          clear: both;
        }
      }
    }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
      & when (isnumber(@product-per-row-md)) {
        &:nth-child(@{product-per-row-md}n+1) {
          clear: both;
        }
      }
      // Default columns = 4
      & when not (isnumber(@product-per-row-md)) {
        &:nth-child(4n+1) {
          clear: both;
        }
      }
    }
    @media (min-width: @screen-lg-min) {
      & when (isnumber(@product-per-row-lg)) {
        &:nth-child(@{product-per-row-lg}n+1) {
          clear: both;
        }
      }
    }
  }

  @media (max-width: @screen-xs-max) {
    .product-item {
      padding-left: 0;
      padding-right: 0;
    }
  }

  @media (min-width: @screen-sm-min) {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    margin-left: floor(-@product-padding-sm/2);
    margin-right: floor(-@product-padding-sm/2);

    .product-item {
      margin-bottom: @grid-gutter-width/2;
      padding-left: floor(@product-padding-sm/2);
      padding-right: floor(@product-padding-sm/2);

      + .product-item,
      + .product-banner {
        margin-top: 0;
      }
    }

    .product-item,
    .product-item > .panel,
    .product-inner,
    .product-banner .product-footer {
      flex-direction: column;
      align-content: stretch;
    }

    .product-item > .panel,
    .product-inner {
      flex: 1 0 auto;
    }

    .product-inner {
      // Remove weird Safari and IE bug fix - not needed in grid layout
      height: auto;
    }

    .product-multi-option .product-option.panel:first-child {
      border-bottom-right-radius: @panel-border-radius;
    }

    .product-col {
      width: auto;
      height: auto;
    }

    .product-option .product-thumb {
      padding-right: @product-padding;
    }

    .product-thumb .thumb-container {
      padding-bottom: percentage(@product-thumb-aspect-ratio-md);
    }

    .product-icon {
      padding-right: @product-padding-sm;
    }

    .product-body {
      padding: @product-padding-sm;
    }

    .product-option {
      .product-prices {
        justify-content: flex-end;
        flex-direction: column;
      }

      .product-body {
        flex: 1 0 auto;
      }
    }

    .product-banner {
      .product-inner {
        justify-content: space-around;
      }

      .product-actions {
        margin-top: 0;
      }
    }

    .product-logo {
      right: @product-padding-sm;
      top: ceil(-@product-logo-size - (@product-padding-sm * -.75));

      + .product-title {
        margin-top: @product-padding;
      }
    }
  }
}