/** BEGIN JTL DEFAULTS **/
.productbox { position: relative;
    &:not(.productbox-show-variations) .productbox-variations { display: none; }

    .form-counter {
        .btn, .input-group-text { padding-left: map-get($spacers, 2); padding-right: map-get($spacers, 2); }
    }

    textarea {
        height: $input-height;
    }
}

.productbox-inner {
    position: relative;

    .productbox-title {
        top: map-get($spacers, 2);
    }
}

.productbox-quick-actions { position: absolute; right: map-get($spacers, 2); top: map-get($spacers, 2); display: flex; z-index: 1; justify-content: flex-end;
    .btn { margin: map-get($spacers, 1); }
}

.productbox-ribbon.ribbon { position: absolute; z-index: 1; top: $spacer; left: -(map-get($spacers, 2)); transition: $transition-base; }

.productbox-sale-percentage { position: relative; top: -(map-get($spacers, 7)); }

.productbox-image { position: relative;
  .productbox-images a {display: block;}
}

.productbox-image-wrapper { @extend .square; }
.productbox-image-wrapper-inner { @extend .square-inner;
    a { display: block; width: 100%; height: 100%; }
    img { position: relative; height: auto; width: auto; max-width: 100%; max-height: 100%; }
}

.productbox-title { display: block; }

.productbox-variations { margin-bottom: $spacer; }

.productbox-price { font-size: $font-size-lg; @extend .text-accent; }

.productbox-onhover { transition: $transition-base-duration; }

.productbox-column {
    .productbox-details { display: none; }
}

.productbox-row {
    .productbox-title { margin-bottom: $spacer; }
}

.productbox-mini {
    .productbox-vat, .productbox-status,
    .productbox-delivery, .productbox-actions { display: none; }
}

.productbox-sidebar {
    .productbox-title { margin-bottom: 0; }
    .productbox-options { text-align: left; }
    .productbox-image { margin-bottom: 0; }

    .productbox-ribbon.ribbon,
    .productbox-quick-actions, .productbox-vat,
    .productbox-details, .productbox-status,
    .productbox-delivery, .productbox-actions { display: none; }
}

.formrow-small {
    white-space: nowrap;
    dd {
        margin-bottom: 0;
    }
}
/** END JTL DEFAULTS **/



.productbox {
    // Wrapper
    &-wrapper, & {
        .delivery-status {
            margin-bottom: 20px;
            font-size: x-small;

            @include media-breakpoint-up(sm) {
                font-size: smaller;
            }

            @include media-breakpoint-up(md) {
                font-size: small;
            }
        }

        // stock-status
        .status-icon {
            text-align: center;
            width: 1.25em;
        }

        border-radius: $border-radius;
    }

    // Ribbons
    &-ribbon.ribbon {
        left: 0;
    }

    // Image
    &-images {
        margin-bottom: 10px;

        img {
            border-radius: $border-radius $border-radius 0 0;
        }

        .img-fluid {
            width: 100%; // make the image take the whole width of the product box.
        }
    }

    // Manufacturer
    &-manufacturer {
        margin-bottom: 5px;
        font-weight: $font-weight-bold;
        text-transform: uppercase;
        a {
            display: inline-block;
            min-height: var(--et-var-wcag-touch-target-min-height, 24px);
        }
    }

    // Title
    &-title {
        margin-bottom: 10px;
        a {
            display: inline-block;
            min-height: var(--et-var-wcag-touch-target-min-height, 24px);
        }
    }

    // Ratings
    a.rating {
        display: inline-block;
        margin-bottom: 20px;
        white-space: nowrap;
        color: $colorRatings;
    }

    // Caption
    &-caption {
        display: flex;
        flex-flow: column wrap;
        height: 100%;
        padding: 0 rem(15px) rem(15px);

        @include media-breakpoint-up(lg) {
            padding: 0 $grid-gutter-width $grid-gutter-width;
        }
    }

    // Price
    &-price {
        display: flex;
        align-items: center;
        margin-top: auto;

        &.special-price {
            color: $colorFontSpecialPrice;
            margin-right: 5px;
        }
        .base-price,
        .base_price { // [sic]
            font-weight: $font-weight-normal;
            font-size: x-small;
        }
    }
    .price-note.et-old-price {
        display: inline-block;
    }
    .square-image {
        .inner {
            align-items: center;
        }
    }
}

.et-item-box {
    .product-actions {
        .badge {
            transform: scale(0.8); // transform instead of changing actual sizes to not mess up the perfect circular look
        }
    }
    &:hover,
    &:focus-visible,
    &:focus-within {
        box-shadow: 0 1px 22px rgba(19, 87, 100, 0.09);
    }
    .productbox-rating {
        min-height: 40px;
        font-size: small;
    }
    .et-item-box-basket {
        margin-top: 20px;
    }
    .variations {
        dt {
            font-weight: bold;
        }
        .swatches-text {
            background-color: $colorNeutral3;
            color: color-yiq($colorNeutral3);
            border-radius: $border-radius;
        }
    }
    .estimated-delivery {
        .status-icon {
            color: color-yiq($colorNeutral3);
        }
        .status-text {
            color: $colorFontMuted;
        }
    }
    .delivery-status {
        .status-text {
            color: $colorFontMuted;
        }
    }
    .btn-cart {
        min-width: 60px;
    }
}

.et-item-list {
    border: 1px solid $colorNeutral5;
    border-radius: $border-radius;

    .product-actions {
        .badge {
            transform: scale(0.8); // transform instead of changing actual sizes to not mess up the perfect circular look
        }
    }
    .et-item-list-image {
        height: 100%;
        padding: 20px 0 20px 20px;
        .productbox-ribbon.ribbon, .productbox-quick-actions {
            top: 0;
        }
    }
    .et-item-list-details {
        height: 100%;
        width: 100%;
        padding: 20px 0 20px 0;
        dl {
            margin-bottom: 0;
        }
    }
    .et-item-list-basket {
        .item-list-price {
            margin-bottom: 20px;
        }
        background-color: $colorNeutral3;
        color: color-yiq($colorNeutral3);
        height: 100%;
        padding: 30px 20px 30px 20px;
    }
    .item-list-basket-details {
        margin-bottom: 20px;
    }
    .variations {
        dt {
            font-weight: $font-weight-bold;
        }
        .swatches-text {
            background-color: $colorContentBackground;
            color: color-yiq($colorContentBackground);
            border-radius: $border-radius;
        }
    }
    .estimated-delivery {
        .status-icon {
            color: color-yiq($colorNeutral3);
        }
        .status-text {
            color: $colorFontMuted;
        }
    }
    .delivery-status {
        .status-text {
            color: $colorFontMuted;
        }
    }
}

.productbox {
    .et-hover-flex,
    .et-hover-block {
        height: 0;
        max-width: 100%;
        overflow: hidden;
    }
}
.productbox:hover,
.productbox:focus-visible,
.productbox:focus-within {
    .et-hover-flex {
        height: auto;
        display: flex;
        overflow: initial;
    }
    .et-hover-block {
        height: auto;
        display: block;
        overflow: initial;
    }
}

.et-item-box,
.et-item-list {
    input.quantity:invalid {
        border-color: $colorDangerFont;
    }
    .form-error-msg {
        font-size: 12px;
    }
    .et-loading-only {
        display: none;
    }
    .io-loading {
        .et-loading-only {
            display: inline-block;
            margin-right: 5px;
        }
    }
}