/*
 *  Template Name:  List
 *  Template URI:   http://en.michaeluno.jp
 *  Author:         Michael Uno
 *  Author URI:     http://en.michaeluno.jp
 *  Description:    Displays Amazon products for the list unit type.
 *  Version:        1.4.1
 */
.amazon-products-container-list {
    overflow-y: auto;
	overflow-x: hidden;
    width: 100%;
    * {
        box-sizing: border-box;
    }
    a {
        color: inherit; // this prevents a theme native text color for button text in .wp-embed elements
        text-decoration: none;
    }
    // Container
    .amazon-product-container {
        width: 100%;
        display: block;
        clear:both;
        margin-bottom: 1.4em;
     }
    > .amazon-product-container {

        // Descriptions
        .amazon-product-description {
            // Word-wrap
            /// These are technically the same, but use both
            overflow-wrap: break-word;
            word-wrap: break-word;

            -ms-word-break: break-all;
            /// This is the dangerous one in WebKit, as it breaks things wherever
            word-break: break-all;
            /// Instead use this non-standard one:
            word-break: break-word;

            //// Adds a hyphen where the word breaks, if supported (No Blink)
            -ms-hyphens: auto;
            -moz-hyphens: auto;
            -webkit-hyphens: auto;
            hyphens: auto;

            /// For the disclaimer to continue
            display: inline;
            margin-right: 0.2em;

            /// To align with other elements
            vertical-align: middle;
        }

        // Meta
        .amazon-product-meta {
            display: inline;
            margin-right: 0.4em;
        }


    }
    .amazon-product-title {
        margin: 0.1em 0 1em;
    }
    .amazon-product-thumbnail-container {
        width: 100%;
    }
    .amazon-product-thumbnail {
        display: table; /* prevents the thumbnail img from exceeding this container height */
        margin: auto;
        text-align: center;
        padding: 1em;

        /* Giving thumbnails a corner-rounded frame not to directly apply to the image (modifying the image may be a violation of terms) */
        a {
            display: inline-block;
            background-color: white;
            padding: 0.8em;
            border: none;
            border-radius: 4%;
            box-shadow: none;
        }
        a:hover,
        a:focus
        {
            box-shadow: none;
        }

        img {
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

    } // .thumbnail
    .amazon-product-author {
        display: inline-block;
        vertical-align: middle;
    }
    // Body (vs image)
    .amazon-auto-links-product-body {
        display: inline-block;
        width: 65.8%;   // Changed from 66% since it breaks the layout when the site language is set to Japanese
        //font-size: 80%; // @todo  5.2.5 deprecate it
    }

    // Customer Reviews
    .amazon-customer-reviews {
        word-break: break-all;
        .review-date {
            font-size: 92%;
        }
        .review-title {
            font-weight: bold;
        }
        .review-image-tile {
            display: inline-block;
            max-height: 100px;
            max-width: 100px;
            margin: 0.2em;
        }
    }
    .crIFrameNumCustReviews {
        display: inline-block;
        vertical-align: top;
        height: auto;
    }
    // Rating stars
    span.asinReviewsSummary > a > img,
    .amazon-customer-reviews img,
    span.crVotingButtons > nobr > a  > img {
        display: inline-block;
    }
    .reviews-voting-stripe {
        border-right: 0 !important;
    }
    .crAvgStars {
        white-space: nowrap;
    }
    span.crAvgStars a {
        font-size: inherit;
    }
    .amazon-customer-rating-stars {
        display: inline-block;
        margin: 0 0.2em 0 0;
        vertical-align: middle;
        line-height: 1.6;
        font-size: 88%;
        img {
            // Prevent rating stars from being wrapped
            display: inline-block;
            // In some themes the rating number and the star image do not align. This is for the fix.
            vertical-align: text-top;
            vertical-align: middle; // not sure but this has been there

            margin-left: -4px;
        }
        .review-stars {
            display: inline;
            vertical-align: text-bottom;
            margin-right: 0.44em;
            line-height: 1;
            svg {
                top: -2px;
            }
        }
        .review-count {
            margin-top: 2px;
            margin-left: -2px;
            display: inline;
        }
    }

    // Pricing disclaimer
    .pricing-disclaimer {
        a.amazon-disclaimer-tooltip {
            outline: none;
            strong {
                line-height:30px;
            }
            > span.amazon-disclaimer-tooltip-content > .amazon-disclaimer-tooltip-content-text {
                z-index: 999;
                display: none;
                padding: 14px 20px;
                margin-top: -30px;
                margin-left: 28px;
                width: 300px;
                line-height: 16px;
                border-radius:4px;
                box-shadow: 5px 5px 8px #CCC;
            }
        }
        a.amazon-disclaimer-tooltip:hover {
            text-decoration: none;
            > span.amazon-disclaimer-tooltip-content {
                display: inline;
                position: relative;
                > .amazon-disclaimer-tooltip-content-text {
                    display: inline;
                    float: right;
                    position: absolute;
                    color:#111;
                    border:1px solid #DCA;
                    background:#fffAF0;

                    /* Adjust the pop up element position */
                    margin-left: -100px;
                    margin-top: -140px;
                }
            }
        }
    }

    // Similar Products (kept for backward compatibility)
    .amazon-similar-products .amazon-similar-product {
        display: inline-block;
        margin: 1em;
        > img {
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            vertical-align: middle;
        }
    }

    // Images
    .amazon-auto-links-product-image {
        vertical-align: top;
        display: inline-block;
        width: 32%;
        margin-right: 1%;
        font-size: 80%;
    }

    /// Sub-images
    .sub-image-container {
        display: inline-block;
        clear: none;
        max-width: 40px;
        max-height: 40px;
        margin: 0.1em;
        .sub-image {
            max-width: 40px;
            max-height: 40px;
        }
    }
    .sub-images {
        max-width: fit-content;
    }

    // Prime Icon
    .amazon-prime {
        display: inline-block;
        vertical-align: middle;
        height: 1em;
        line-height: 1.6;
        font-size: 100%;
        margin-right: 0.2em;
        svg {
            vertical-align: top;
        }
    }
    .prime-icon {
        display: inline-block;
        width: 60px;
        height: 1em;
        background-size: contain;
        background-repeat: no-repeat;
    }

    // Prices and Discount
    .amazon-prices,
    .amazon-discount
    {
        margin-right: 0.2em; /* This needs to be consistent with the prime mark and rating star icons */
        line-height: 1.6;
        font-size: 88%;
        display: inline-block;
        vertical-align: middle;
    }
    .amazon-product-price,
    .amazon-product-discounted-price,
    .amazon-product-lowest-new-price,
    .amazon-product-lowest-used-price,
    .amazon-prices .proper-price,
    .amazon-prices .offered-price
    {
        display: inline;
    }
    .amazon-product-lowest-new-price-value,
    span.offered-price {
        color: #B12704;
        font-weight: bold;
    }

    // Categories
    ul.categories {
        list-style-type: none;
        margin: 0.4em 0;
    }

    // Features
    ul.features {
        margin: 1em 0 0.4em 0;
    }
    
    // Buttons
    .amazon-auto-links-button-container {
        margin-top: 0.8em;
        margin-bottom: 0.8em;
    }
    .amazon-auto-links-button-container button {
        margin: 0 auto;
        display: block;
    }

    // Now retrieving
    .now-retrieving.context-image_set {
        min-height: 40px;
        margin: 0;
    }
    .now-retrieving.context-feature {
        margin-top: 0.8em;
    }

}

// Widgets
/// Widget Area
.widget-area .amazon-products-container-list .amazon-product-container,
.amazon-auto-links-widget .amazon-products-container-list .amazon-product-container
{
    padding-right: 1em;
}
/// Body
.widget-area .amazon-products-container-list .amazon-auto-links-product-body,
.amazon-auto-links-widget .amazon-products-container-list .amazon-auto-links-product-body
{
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/// Images
.widget-area .amazon-products-container-list .amazon-auto-links-product-image,
.amazon-auto-links-widget .amazon-products-container-list .amazon-auto-links-product-image
{
    width: 100%;
    max-width: none;
}
/// Sub-images
.widget-area .amazon-products-container-list .sub-image-container,
.amazon-auto-links-widget .amazon-products-container-list .sub-image-container
{
    margin: 0.4em 0.4em 0 0;
}
.widget-area .amazon-products-container-list .sub-images,
.amazon-auto-links-widget .amazon-products-container-list .sub-images
{
    margin-bottom: 1em;
}
/// Contents
.widget-area .amazon-products-container-list .amazon-product-content *,
.amazon-auto-links-widget .amazon-products-container-list .amazon-product-content *
{
    width: auto;
    display: inline-block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

// Embedded Pages (amazon-auto-links/embed)
.wp-embed {
    .amazon-products-container-list {

        overflow-y: hidden;
        .amazon-product-title {
            font-size: 136%;
            margin-top: 0;
            margin-bottom: 0.4em;
        }
        > .amazon-product-container .amazon-product-description {
            display: block;
            vertical-align: middle;
        }
        .amazon-auto-links-product-body {
            font-size: 100%;
        }
        // @deprecated 4.6.3 - not look good with SVG icons
        //.amazon-customer-rating-stars .review-stars {
            // line-height: 2em;
        //}

        > :last-child {
            margin-bottom: 0;
        }

        .amazon-product-thumbnail {
            width: auto !important; /* Fixes the thumbnail width sticking out and overlaps with the product body */
        }

        .now-retrieving {
            font-size: 88%;
        }

        .amazon-customer-rating-stars .review-stars svg {
            top: -2px;
        }


    }

}


/* Responsive */
/* [4.6.13] Changed the max-width to 520 from 560 to be compatible with the embed view of the Twenty Seventeen theme */
@media only screen and (max-width: 520px) {
  .amazon-products-container-list .amazon-auto-links-product-image {
    width: 100%;
    margin-bottom: 1em;
  }
  .amazon-products-container-list .amazon-auto-links-product-body {
    font-size: 88%;
    width: 100%;
  }
}

// Unit Preview
#aal-unit-preview {
    .amazon-products-container-list {
        overflow-y: hidden;
        .amazon-product-container:last-child {
            margin-bottom: 0;
        }
    }
}